zoukankan      html  css  js  c++  java
  • sass03 变量、样式导入

    demo1.scss

    @import "css.css";    //导入css文件
    @import "http://ss/xx";    //导入css文件
    @import url(css.css);    //导入css文件
    @import "a.scss";    //导入scss文件
    
    $fontsize:14px ;
    $fontsize:12px !default;//变量后面的值会覆盖前面的值,默认值
    
    $paddings: 5px 10px 5px 10px;//多值变量
    
    $maps: (color:red,borderColor:blue);//多值变量
    
    $className:main;//特殊变量
    $text-info:lightgreen;//特殊变量
    
    body{
        $color:red !global; //定义全局变量,以便后面的footer可以访问到,
        color:$color;
        font-size:$fontsize;
        padding:$paddings;
        padding-left:nth($paddings, 2);//下标从1开始
        
    }
    footer{
        color:$color;
        background-color:map-get($maps,borderColor);
    }
    .#{$className}{//使用main变量
        width:50px;
    }
    
    .text-info{
        color:$text-info;
    }

    编译后的demo1.css

    @import url(css.css);
    @import "http://ss/xx";
    @import url(css.css);        //导入css文件原样输出
    head {              //导入scss文件,会把scss文件的代码编译出来
      width: 100px; }
    
    body {
      color: red;
      font-size: 14px;
      padding: 5px 10px 5px 10px;
      padding-left: 10px; }
    
    footer {
      color: red;
      background-color: blue; }
    
    .main {
      width: 50px; }
    
    .text-info {
      color: lightgreen; }
    
    /*# sourceMappingURL=demo1.css.map */

    a.scss

    head{
        width:100px;
    }
  • 相关阅读:
    个人阅读2
    代码复审
    PairProject 总结
    Pairproject 移山之道 阅读随笔和一些问题
    M1/M2个人总结
    团队项目个人总结
    个人阅读作业2
    代码互审
    《移山之道》读后感
    Individual Project
  • 原文地址:https://www.cnblogs.com/yaowen/p/6998339.html
Copyright © 2011-2022 走看看