sass那些事儿

Sass，Syntactically Awesome StyleSheets，语法样式表。
Sass有两种实现，ruby-sass与lib-sass，前者用ruby实现，后者用C/C++实现。

一、Sass的安装方案
1、标准安装
A、先安装Ruby，再安装Sass。

gem install sass 

B、查看版本

sass -v 

C、查看帮助(3.5.1)

sass -h

D、安装compass

gem install compass

compass是sass的工具库，在sass的基础上封装了一系列有用的模板和模块，补充sass的功能，compass和sass的关系类似于jQuery和JavaScript的关系。

E、检验compass是否安装成功

compass -v

2、借助npm安装

二、创建Sass文件
1、sass文件类型

• 以xxx.sass结尾的文件，不使用花括号和分号；
• 以xxx.scss结尾的文件，和xxx.css文件一样使用花括号和分号。scss(Sassy CSS)，是一个css3语法的扩充版本，是Sass3的新语法格式。

2、温馨提示

• 在创建Sass文件时，记得将文件编码设置为“utf-8”；
• 如果文件以.sass结尾，请用旧语法书写；
• 如果文件以.scss结尾，请用新语法书写，千万不要混用混写；
• 配置好ruby的环境变量，否则会导致编译失败；
• 文件目录请用英文，不要用中文。

3、文件引用
一般情况下，书写sass文件，编译成css后，用link引用，而不是直接引入.scss文件。当然，如果结合webpack使用，那就另当别论了，具体引用方式请看下文。

三、Sass的语法（3.5.1）
1、注释

//单行注释
单行注释，不会出现在编译后的css文件中。
/*多行注释*/
多行注释，只会出现在编译后的代码格式为expanded的css文件中。
/*!强制注释*/
强制注释，会出现在任何代码格式的css文件中。

2、嵌套
嵌套不要超过3层。
A、选择器嵌套

div{
    margin: 100px;
    em{
        font-weight: normal;
        color: red;
    }
}

B、属性嵌套

p{
    border:{
        color: blue;
    }
}

C、伪类嵌套

a{
    color: orange;
    &:hover{
        color: blue;
    }
}

3、变量

$blue : #1875e7;　
div {
　color: $blue;
}

如果变量需要镶嵌在字符串之中，就必须写在#{}之中。

$direction: left;
div {
　border-#{$direction}-radius: 5px;
}

4、作用域(尽量少用)
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。
A、降低优先级

!default

$blue : #1875e7 !default;　
div {
　color: $blue;
}

B、提升优先级

!global

$blue : #1875e7;　
div {
 $blue : #00f !global;　
　color: $blue;
}

除非元素自身重置变量，才能覆盖!global的变量。

5、数据类型

• 数字：1, 2, 13, 10px
• 字符串：有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色：blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型：true, false
• 空值：null
• 数组 (list)：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps：相当于JavaScript的object，(key1: value1, key2: value2)

6、计算

$num: 5;
div {
　margin: (14px/2);
　top: 50px + 100px;
　right: $num * 10%;
}

7、数组
在Sass的列表中，你可以使用空格符或者逗号作为列表项与列表项之间的分隔符。Sass中的列表索引值和JavaSctript数组中的索引值不一样，它是从1开始，而不是从0开始。

$list: a, b, c, d, e, f

//scss
$list:(#f00,5,"normal"); 
div { 
    color: nth($list,1); 
    font-size: nth($list,2) * length($list) + px; 
    font-weight: nth($list,3); 
} 

//css
div { 
    color: #f00; 
    font-size: 15px; 
    font-weight: "normal"; 
}

8、代码重用之继承@extend

.parent{
    font-size: 15px;
    color: blue;
}
.child{
    @extend .parent;
    border: 1px solid #f00;
}

好处：可以继承所有样式，编译出来的css会将所有选择器合并在一起，代码比较干净。继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。
弊端：不能传参。

9、代码重用之占位符%
%placeholder声明的代码，如果不被@extend调用，就不会产生任何代码，只是静静的躺在你的某个SCSS文件中。

%mt5 { 
    margin-top: 5px; 
} 
%pt5 { 
    padding-top: 5px; 
}

.btn { 
    @extend %mt5; 
    @extend %pt5; 
}

占位符和继承相似，通过@extend调用的占位符，编译出来的代码会将相同的代码合并在一起。

10、代码重用之混合宏@mixin
A、无参

@mixin eleLeft{
    float: left;
    margin-left: 5px;
}
div{
    @include eleLeft;
}

B、单参

@mixin eleLeft($val: 5px){
    float: left;
    margin-left: $val;
}
div{
    @include eleLeft(10px);
}

C、可枚举多参

@mixin rounded($vert, $horz, $num: 10px) {
　margin-#{$vert}: $num;
    padding-#{$horz}: $num;
}

div { 
    @include rounded(top, left); 
}
p { 
    @include rounded(top, left, 5px); 
}

D、不可枚举参数
当混合宏传的参数过多时，可以使用参数“...”来替代。

@mixin box-shadow($shadow...) { 
    @if length($shadow) >= 1 { 
        box-shadow: $shadow; 
    } @else { 
        $shadow: 0 0 4px rgba(0,0,0,.3); 
        box-shadow: $shadow; 
    } 
}

.block { 
    @include box-shadow; 
} 
.hidden { 
    @include box-shadow(inset 0 0 1px rgba(red,.5),0 0 2px rgba(red,.25)); 
}

好处：可以传参数；
弊端：编译出来的css相同代码不会合并。比如.div和.p内部样式相同，但是分开输出了。如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。

11、条件语句

$bg-color: black;
@if $bg-color == black {
    background-color: #000;
} @else {
    background-color: #fff;
}

12、循环语句

A、for循环
a.1、$i取值范围只包含start，不包含end。

@for $i from 1 to 10 {
    .border-#{$i} {
　　 border: #{$i}px solid blue;
　}
}

a.2、$i取值范围既包含start，也包含end。

@for $i from 1 through 3 {
  .tab-#{$i} { width: 2rem * $i; }
}

B、while循环

$i: 6;
@while $i > 0 {
　.item-#{$i} { 
        width: 2px * $i; 
    }
　$i: $i - 2;
}

C、each循环

@each $item in a, b, c, d {
    .bg-#{$item} {
    　background-image: url("/image/#{$item}.jpg");
　}
}

13、相关函数

A、三元条件函数

if($condition,$if-true,$if-false)

B、颜色函数
C、数组函数
D、自定义函数

@function double($n) {
　@return $n * 2;
}
div {
　width: double(5px);
}

14、引用外部文件
A、顶部导入

@import "grid";
@import "grid.scss";

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件，sass局部文件的文件名规定以下划线开头。
如果需要导入SCSS或者Sass文件，但又不希望将其编译为CSS，只需要在文件名前添加下划线，这样会告诉Sass不要编译这些文件，但导入语句中却不需要添加下划线。
B、内部导入
有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

给main.scss导入某个css规则

.blue-theme {
    @import "blue-theme"
}

温馨提示：不可以在混合指令或控制指令中嵌套@import。
C、css文件导入

@import "cssfile.css";
@import "cssfile" screen;
@import "http://cssfile.com/bar";
@import url(cssfile);

sass兼容原生的css，所以它也支持原生的CSS@import。如果不想造成浏览器额外下载，可以写一个css文件，然后命名为.scss文件，再导入。

15、如何使用compass

四、Sass的编译方案
1、命令行实现编译
A、生成css文件

sass sassfile.scss

B、单文件转换

sass sassfile.scss cssfile.css

C、单文件监听

sass --watch sassfile.scss:cssfile.css

D、监听文件夹sass/main中所有Sass文件，并自动编译为css，放到dist/css目录下。

sass --watch sass/main:dist/css

--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

E、4种编译风格
e.1、嵌套式，它是默认值。

sass --style nested sassfile.scss cssfile.css

.box{
    width:250px;
    height:100px;
    background:red; }
.left{
    float:left;
    width:50px; }
.right{
    float:right; }

e.2、展开式

sass --style expanded sassfile.scss cssfile.css

.box{
    width:250px;
    height:100px;
    background:red;
}
.left{
    float:left;
    width:50px;
}
.right{
    float:right;
}

e.3、紧凑式，一行一行显示。

sass --style compact sassfile.scss cssfile.css

.box { width:250px; height:100px; background:red; }
.left { float:left; width:50px; }
.right { float:right; }

e.4、压缩式，常用于生产环境。

sass --style compressed sassfile.scss cssfile.css

.box{width:250px;height:100px;background:red;}.left{float:left;width:50px;}.right{float:right;}

2、借助sublime完成编译

Sass
Sass Build：ctrl + b，编译。
SublimeOnSaveBuild：ctrl + s，保存文件的时候自动编译。

在sublime中安装以上3个插件，即可实现自动编译。

新建一个scss文件，第一次保存编译的时候，sublime会提示SASS和SASS-Compressed两个选项。

• SASS：编译成普通的css文件，默认不压缩；
• SASS-Compressed：编译成压缩格式的css文件。

假设被编译文件是demo.scss，则会在当前目录默认生成demo.css文件和demo.css.map文件(用于调试)。
如果希望demo.scss和demo.css分别在不同文件夹，修改css文件默认生成目录，这里提供两种方式。

//方案A
通过Sublime Text -> Tools -> Build System -> New Build System，自定义规则。

//方案B
Sublime Text -> Preferences -> Browse Packages，打开Packages文件夹，进入Sublime Text 3Installed Packages文件夹；
找到SASS Build.sublime-package压缩包，用winrar打开；
找到SASS - Compressed.sublime-build和SASS.sublime-build文件，用sublime打开他们；
把这两个文件中的 "$file:${file_path}/${file_base_name}.css" 改成 "$file:${file_path}/../css/${file_base_name}.css"。

3、结合webpack自动化构建

4、GUI工具编译
Koala，CodeKit

5、在线编译