20170711

安装sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。但是MAC系统自带，所以不用进行安装。Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件，使用这个系统能够轻松地安装Sass和Compass。
1）输入以下命令进行安装

$ sudo gem install sass
$ sudo gem install compass

2）输入以下命令返回版本信息，确保是否安装成功

$ sass –v
$ compass –v

3）更新sass

$ gem update sass

4）查看sass帮助

$ sass -h

---

编译sass

1）命令行编译

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录
sass --watch app/sass:public/stylesheets

2）命令行编译配置常用选项

a. --style表示解析后的css是什么排版格式

$ sass --watch input.scss:output.css--style compact 排版格式

编译排版格式一共有四个：
nested（不同级别缩进是不同的）；
expanded（与正常写的css格式一样）；
compact（空格还存在，无缩进，不同选择器间有换行）；
compressed（与compact相比，没有空格）。

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

---

sass语法

1）文件后缀
有两种，scss和sass，区别在于scss比sass文件多了大括号和分号，为避免严格格式下报错，一般用scss。举例：

//文件后缀名为sass的语法
body
 background: #eee
 font-size:12px

//文件后缀名为scss的语法 
body {
 background: #eee;
 font-size:12px;
}

2）注释
与less相同，也是推荐多行注释/*……*/。
3）导入
sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。所有的sass导入文件都可以忽略后缀名.scss。（这些都与less相同）
一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。
4）变量
以$开头（less是以@开头），后面跟变量名、冒号(:)和变量值。
a. 普通变量
如$fontSize: 12px; 定义后可在全局范围内使用；
b. 默认变量
值后面加上!default则表示默认变量。sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。在进行组件化开发的时候会非常有用，目前我还没有体会到。
c. 特殊变量
如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。如

$borderDirection:       top !default; 
.border-#{$borderDirection}{
 border-#{$borderDirection}:1px solid #ccc;
}

d. 多值变量
分为list类型和map类型，list类型有点像js中的数组，而map类型有点像js中的对象。
e. 目前变量机制
在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)
5）嵌套
a. 选择器嵌套
在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。可以使用&表示父元素选择器。
b. 属性嵌套
有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。如

.fakeshadow {
 border: {
   style: solid;
   left: {
     width: 4px;
     color: #888;
    }
   right: {
     width: 2px;
     color: #ccc;
    }
  }
}

6）Mixin
使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。（在less中并不用那么麻烦，一个.就解决了）
7）@at-root
sass 3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
8）@content
@content在sass 3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。例子：

//sass style
//-------------------------------                     
@mixin max-screen($res){
 @media only screen and ( max-width: $res )
  {
   @content;
  }
}

@include max-screen(480px) {
 body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
 body { color: red }
}    

注意：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用继承%。
9）继承
选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。
从sass 3.2.0以后就可以定义占位选择器%。优势：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。如

//sass style
//-------------------------------
%ir{
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;
}
%clearfix{
  @if$lte7 {
   *zoom: 1;
  }
 &:before,
 &:after {
   content: "";
   display: table;
   font: 0/0 a;
  }
 &:after {
   clear: both;
  }
}
#header{
  h1{
   @extend %ir;
   width:300px;
  }
}
.ir{
 @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;
}
#header h1{
 width:300px;
}

%clearfix没有被用到，就不会进行解析。
10）函数
实际项目中使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
11）运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。
注意：运算符前后请留一个空格，不然会出错。（less就没有这个问题）
12）条件判断及循环
a. @if判断
可一个条件单独使用，也可以和@else结合多条件使用；
b. 三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。
c. for循环
有两种形式，@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，through表示包括end这个数，而to则不包括end这个数。
d.@each循环
语法@each $var in <list ormap>，$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
只是简单看了一下语句，具体怎么用还要在实践中练习，觉得for和@each循环应该用处很大。