Sass学习日记
Sass
是一种基于ruby的动态样式语言。是一门高于css的元语言，他能用来清晰地、结构化的描述文件样式，有着比普通css更加强大的功能。Sass能够提供更简洁，更优雅的语法，同事提供多种功能来创建可维护和管理的样式表
安装
1.安装ruby
在Ruby官网选择电脑系统对应的版本下载、安装，建议默认路径即可。安装过程中注意勾选第二项：Add Ruby executablesto your PATH。安装完毕在命令行环境中通过ruby -v查看是否成功。
2.安装Sass
Ruby安装成功之后，它自带的包管理工具gem也就安装好了。直接打开命令行通过gem执行Sass安装命令，再查看是否安装成功（这里是要翻墙的）：
gem install sass
sass -v #查看是否安装成功
另外我们可以用国内的镜像，避免翻墙：
gem sources --remove #移除自带源
gem sources -a https://gems.ruby-china.org/ #安装RubyChina的源
gem sources -l #查看当前的源
gem install sass
sass -v
安装源的过程中，如果提示SSL错误，那就把源地址换一下成 http://gems.ruby-china.org/ 再试。
Sass的编译
命令行编译
单文件转换命令
sass style.scss style.css
单文件监听命令：
sass --watch style.scss:style.css
文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
自动化编译
可以借助gulp、grunt等自动化构建工具编译
常用基本语法
1.变量
变量是Sass中最基本的语法。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。
普通变量
定义之后可以在全局范围内使用。
//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
默认变量
sass的默认变量仅需要在值后面加上!default即可。
//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可
//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
2.嵌套
选择器嵌套：
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器
//sass style
//-------------------------------
div {
a {
color:red;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
div a {
color : red;
}
div a:hover{
color:#ddd;
}
属性嵌套
属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。如：
//sass style
//-------------------------------
p {
border: {
color: red;
}
}
//css style
//-------------------------------
p {
border-color: red;
}
注意，border后面必须加上冒号。
3.继承extend
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
4.混合(mixin)
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
使用@mixin命令，定义一个代码块。
@mixin right {
float: right;
margin-right: 10px;
}
使用@include命令，调用这个mixin。
div {
@include right;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，可以像下面这样调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
5.颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
6.插入文件
@import命令，用来插入外部文件:
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
7.条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else-if,@else命令：
@if(lightness($color) > 30% {
background-color: #000;
}@else-if(lightness($color) <70%){
background-color: #c2c2c2;
}@else {
background-color: #fff;
}
8.循环语句
SASS支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
9.计算功能
SASS允许在代码中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
10.注释
SASS共有两种注释风格。
标准的CSS注释 /* comment / ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
