强悍的 CSS 扩展语言 -- Sass

<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>

4.导入其它sass 文件：

@import 'test.scss';

很明显用 Sass 来写 css, 不但代码量倍数级减少，且优雅简洁易于维护和扩展；

其实 sass 语法有点像 js ，如果会 js，举一反三学起来很容易；

window 下的编译环境：

先按装 Ruby, 下载地址：http://rubyinstaller.org/downloads/

再安装 Sass,

gem install sass

就可以用 sass 命令进行编译了：

sass input.scss output.css

sass 还有一个好牛叉的插件： compass, 先看下官网：http://compass-style.org/，有时间再作整理；

巴特西

强悍的 CSS 扩展语言 -- Sass

最新文章

热门文章