标签：
<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/， 有时间 再作整理；
标签：
原文地址：http://www.cnblogs.com/dhenskr/p/4374526.html
