强悍的 CSS 扩展语言 -- Sass

浏览数：25 / 时间：2015年06月08日

<div class = ‘testBorder‘>
   <p>
        <input/>       
    </p>
</div>

假设上面这 3 个 DOM 元素有这样的需求， div 去边框， p 显示边框， input 只显示底部边框, 而且统一用 !important 关键字提高样式的优先权；

如果手写纯 CSS 会是这样：

.testBorder{
   border:none !important;   
}
.testBorder p{
   border:1px solid !important;
}
.testBorder p input{
   border-width:0 0 1px 0 !important;
   border-style: solid !important;   
}

会发现，有重复的代码".testBorder", ".testBorder p", "!important"。这只是简单的需求，如果项目庞大对样式的需求复杂，这样手写 CSS 和搬砖真没区别；

而换用 Sass 来写：

$imp: !important; /*定义变量*/
.testBorder{
   border:none $imp;
   p{
      border:1px solid $imp;
      input{
         border-width:0 0 1px 0 $imp;
         border-style:solid $imp;
      }
   }
}

代码可嵌套了；

CSS 是层叠样式表，不是语言，缺乏编程语言中强大的特性：变量、函数、运算、循环、判断、继承等；

而它的扩展语言 Sass 就支持这些特性，Sass 让我们用编程方式来写 CSS 代码从而提高效率节约程序员的时间；

Sass 的官网：http://sass-lang.com/，里面文档非常精确齐全，都不用再看其它介绍文章了，显示得多余。文档虽然是鸡肠，但都是比较常用的单词，且还有例子，基本能看明白；

下面就最近自己常用的 Sass 知识点做下简要的记录，方便以后复习；

1.变量

定义变量 "$[name]: [value];"

$columnCount: 5; /*数字*/
$columnWidth: 100px;/*样式*/
$columnClassName: ‘column‘;/*字符串*/
$domTypeArr: (‘input‘,‘select‘,‘div‘);/*数组*/
$canExtend:true; /*布尔*/

2.函数、判断

定义函数： "@function [funcName]([parameters]){//doSth}"

调用方式： [functionName]([parameter]);

@function extendWidth($width){
   @if($width < 1){
      @return 50px;
   }@else{
      @return $width * 50px;
   }
}

上面加粗的代码就是判断，和 js 的判断一样，区别只是关键字前面要加 @字符，如 @if @else

3.混合指令 @Mixin ，循环for

Mixin 不知怎么翻译，搜了一遍翻译为 "混合指令"，作用是把一串 css 包在一起，供调用；

定义： "@mixin [mixinName]([parameters]){//sth css}", ([parameter]) 括号和parameter 是可选的，即没有参数时可不加括号();

调用方式： @include [mixinName]([parameter])

@mixin push($pushWidth){
   $_extendPushWidth: $pushWidth + 10px; /*定义内部变量*/
   margin-left: $_extendPushWidth;
}

@mixin column($columnIndex,$pushWidth:null){
   float:left;/*css*/
   border:1px solid;
   width:floor(extendWidth($columnIndex)); /*调用 extendWidth 用户函数计算宽度，再调用Sass 内置的数学函数 floor 获取整数*/
   @if($pushWidth != null){
      @include push($pushWidth); /*调用混合指令(mixin) push 生成 margin-left*/
   }
}

@mixin generateTable{
   .my-table{/*css class*/
      max-width:400px;
      @for $i from 1 through $columnCount{ /*$totalColumns 是上面的全局变量*/
          .#{$columnClassName}#{$i}{
         background-color:rgba(255,0,0,$i/10);
             @include column($i,5);/*调用mixin column 生成 column 样式*/
          }
      }
   }
}

.my-form{
   width:500px;
   @include generateTable();
}

注意： mixin 与函数的主要区别：mixin 相当于一段代码块，和函数一样可在其它地方重复调用，它不像函数那样返回一个值，它是返回一个代码块，调用前要加关键字 @include；

@for $i from 1 through $columnCount{ } 这是 for 循环，把 $i 从 1 开始递增到 $columnCount；

如果要循环一个数组或集合，要用到 @each $var in [array]{}

把上面三段代码 copy 到一个文件(如 test.scss), 在命令窗口中调用 sass 命令：

sass c:\test.sass c:\test.css

生成的 css ：

@charset "GBK";
/*数字*/
/*样式*/
/*字符串*/
/*数组*/
/*布尔*/
.my-form {
  width: 500px; }
  .my-form .my-table {
    /*css class*/
    max-width: 400px;
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/
    /*$totalColumns 是上面的全局变量*/ }
    .my-form .my-table .column1 {
      background-color: rgba(255, 0, 0, 0.1);
      float: left;
      /*css*/
      border: 1px solid;
      width: 50px;
      /*调用 extendWidth 用户函数计算宽度，再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column2 {
      background-color: rgba(255, 0, 0, 0.2);
      float: left;
      /*css*/
      border: 1px solid;
      width: 100px;
      /*调用 extendWidth 用户函数计算宽度，再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column3 {
      background-color: rgba(255, 0, 0, 0.3);
      float: left;
      /*css*/
      border: 1px solid;
      width: 150px;
      /*调用 extendWidth 用户函数计算宽度，再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column4 {
      background-color: rgba(255, 0, 0, 0.4);
      float: left;
      /*css*/
      border: 1px solid;
      width: 200px;
      /*调用 extendWidth 用户函数计算宽度，再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }
    .my-form .my-table .column5 {
      background-color: rgba(255, 0, 0, 0.5);
      float: left;
      /*css*/
      border: 1px solid;
      width: 250px;
      /*调用 extendWidth 用户函数计算宽度，再调用Sass 内置的数学函数 floor 获取整数*/
      /*定义内部变量*/
      margin-left: 15px;
      /*调用混合指令(mixin) push 生成 margin-left*/
      /*调用mixin column 生成 column 样式*/ }

效果：

<div class="my-form">
    <div class="my-table">
        <div class="column1">column1</div>
        <div class="column2">column2</div>
        <div class="column3">column3</div>
    </div>