一.准备工作：
1.安装（mac）：
gem install sass;
2.sass文件的预编译：
屏幕快照 2018-03-05 上午12.42.16.png
二.变量
1.变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。
$border-color: green;
.box {
$font-size: 20px;
font-size: $font-size;
height: 300px;
width: 300px;
border: 1px solid $border-color;
}
2.将局部变量转为全局变量：!global
.scss文件：
.scroll-list {
$list-style: none !global;
li {
list-style: $list-style;
}
}
.project-list {
list-style: $list-style;
}
编译后.css文件：
.scroll-list li {
list-style: none; }
.project-list {
list-style: none; }
三.sass文件的导入
1.sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
2.使用sass的@import规则并不需要指明被导入文件的全名。例如：@import"sidebar";可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。
3.sass局部文件的导入
约定sass局部文件的文件名以下划线开头。例如： _night-sky.scss
约定的目的： sass就不会在编译时单独编译这个文件输出css。
导入方式：
import 'night-sky';
4.默认变量值：
作用：局部文件可以被多个不同的文件引用，但有时需要对导入的样式做一些修改，所以需要默认变量值。
$box-width: 30px !default;
.box {
width: $box-width;
}
当被导入的sass文件中已经对该变量赋了值，则导入的文件中的值无效，否则为默认值。
5.嵌套导入
sass允许@import命令写在css规则内：
_2.scss:
.face {
width: 20px;
height: 40px;
}
1.scss:
.mouse {
@import "import-sass/2";
}
结果：
.mouse .face {
width: 20px;
height: 40px;
}
6.原生的css文件的导入：
三种情况下会生成原生的CSS@import，但会造成浏览器解析css时的额外下载：
（1）被导入文件的名字以.css结尾；
（2）被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
（3）被导入文件的名字是CSS的url()值。
在sass文件中导入css文件的方法：
把原始的css文件改名为.scss后缀，即可直接导入了。
四.静默注释：
1.作用：静默注释在生出的css文件中会被抹去.
2.样式：
.finger {
font-size: 12px; // 字体大小
}
五.混合器：
sass的混合器可以实现大段样式的重用。混合器使用@mixin标识符定义。例子：
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
1.何时使用混合器：
对一大段代码能起一个代表性的名字
2.混合器中的css规则：
混合器可以使用嵌套：
@mixin radius {
border-radius: 10px;
div.box-image {
border-color: red;
border-width: 3px;
}
}
.clothes {
color: #000;
@include radius;
}
结果：
.clothes {
color: #000;
border-radius: 10px;
}
.clothes div.box-image {
border-color: red;
border-width: 3px;
}
3.给混合器传入参数：
@mixin box-color ($normal,$hover,$visited) {
background-color: $normal;
&:hover {
background-color:$hover;
}
&:visited{
background-color: $visited;
}
}
.food {
@include box-color(red,yellow,green)
}
六.使用选择器继承
1.选择器继承：
.aside {
border: 1px solid red;
background-color: yellow;
}
.aside div{
color: #ccc;
}
.aside li {
font-size: 20px;
}
.footer {
@extend .aside;
border-width: 2px;
}
注意：任何与.aside 相关的样式都会被继承。
结果是：
.aside, .footer {
border: 1px solid red;
background-color: yellow; }
.aside div, .footer div {
color: #ccc; }
.aside li, .footer li {
font-size: 20px; }
.footer {
border-width: 2px; }
六.SassScript中的数据类型
1.SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。
2.数据类型
数字: 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)
3.只有当插值语句传入有引号的字符串，才会被编译为无引号字符串例子：
@mixin font-style($selector){
.text-title #{$selector} {
font-style: italic;
}
}
.text {
@include font-style(".first-line");
}
编译结果：
.text .text-title .first-line {
font-style: italic; }
4.三处会将‘/’作为运算符的情况：
- 如果值，或值的一部分，是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
/*除法运算*/
.box-img {
$width: 20px;
width: $width/2;
height: (500px/2);
margin-left: 5px + 18px/2;
}
结果：
.box-img {
width: 10px;
height: 250px;
margin-left: 14px; }
5.颜色运算：
.box-bgc {
background-color: #111 + #222;
color: (#888/2);
border-color: rgba(100,100,100,0.8) + rgba(50,50,50,0.8);
// 其中透明度是不能计算的，必须相等
}
结果：
.box-bgc {
background-color: #333333;
color: #444444;
border-color: rgba(150, 150, 150, 0.8); }
透明度运算：
.list-bgc {
$color: rgba(100,100,100,0.3);
color: opacify($color,0.5); //加法
background-color: transparentize($color,0.1); // 减法
}
结果：
.list-bgc {
color: rgba(100, 100, 100, 0.8);
background-color: rgba(100, 100, 100, 0.2); }
6.有无引号字符串顺序的区别：
.symbol {
font-family: "Microsoft " + YaHei;
border-style: i + 'talic';
}
结果：
.symbol {
font-family: "Microsoft YaHei";
border-style: italic; }
7.字符串运算之 +：
连接字符串：
.mouse {
cursor: p + ointer;
}
结果：
.mouse {
cursor: pointer; }
8.插值语句 #{}：
$name: color;
$attr: border;
$font-size: 22px;
$line-height: 11px;
.img-#{$name} {
#{$attr}-color: red;
font: #{$font-size}/#{$line-height}; // 使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
}
结果：
.img-color {
border-color: red;
font: 22px/11px; }
七.控制指令：
1.if
p {
@if 1 + 1 == 2 {
color: red;
}
@if 2+ 3 > 5 {
font-size: 12px;
}
@if null {
border: 1px solid #ccc;
}
}
/*if语句*/
$type: opacity;
li {
@if $type == red {
color: #000;
} @else if($type == yellow) {
color: red;
} @else if($type == opacity) {
color: green;
}
}
结果：
p {
color: red; }
/*if语句*/
li {
color: green; }
2.for语句：
@for $i from 1 through 3 {
icon-#{$i} {
width: 20px * $i;
}
}
结果：
/*for语句*/
icon-1 {
width: 20px; }
icon-2 {
width: 40px; }
icon-3 {
width: 60px; }
@for $i from 1 to 3 {
fly-#{$i} {
height: 30px * 1;
}
}
//结果：
fly-1 {
height: 30px; }
fly-2 {
height: 30px; }
3.each语句：
@each $var in dog,cat,sheep {
.box-#{$var} {
background-color: red;
}
}
@each $key,$value in (header: red,body: yellow,foot: blue) {
.fix-#{$key} {
color: $value;
}
}
@each $name,$color,$url in (asia,yellow,China),(africa,black,agla),(oceania,white,austrilia) {
.earth-#{$name} {
color: $color;
background: url(image/#{$url}.jpg);
}
}
//结果：
.box-dog {
background-color: red; }
.box-cat {
background-color: red; }
.box-sheep {
background-color: red; }
.fix-header {
color: red; }
.fix-body {
color: yellow; }
.fix-foot {
color: blue; }
.earth-asia {
color: yellow;
background: url(image/China.jpg); }
.earth-africa {
color: black;
background: url(image/agla.jpg); }
.earth-oceania {
color: white;
background: url(image/austrilia.jpg); }
4.while语句：
$while-val: 6;
@while $while-val > 2 {
.chart-#{$while-val} {
width: 20px * $while-val;
}
$while-val: $while-val - 1;
}
// 结果：
.chart-6 {
width: 120px; }
.chart-5 {
width: 100px; }
.chart-4 {
width: 80px; }
.chart-3 {
网友评论