scss

1 sass

跟less一样，sass也是一种css预编译语言，比less支持的语法更多，如循环语句，条件语句等。sass是通过ruby编译的，因此我们使用sass要首先安装ruby
安装完成，输入gem -v可以查看版本号
sass属于gem的一个模块，我们可以通过gem安装sass:gem install sass
安装完成，提供了sass指令，我们输入sass -v可以查看版本号，我们可以手动安装sass:gem install 将sass文件拖进来。ruby编码不涵盖中文字符串，所以我们要更改字符集：进入c:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/sass-3.4/lib/sass目录，打开engine.rb文件，在54行，添加Encoding.default_external=Encoding.find(‘utf-8’)

2 拓展名

sass支持两种扩展名
一种.sass
这种扩展名文件，支持的语法比较新，跟css差距很大，很少使用
一种.scss
这种扩展名文件，支持的语法跟css语法很相似，因此用的多
sass跟less一样，浏览器不识别，因此需要编译

3 编译

命令行编译：我们安装完成sass，可以通过sass指令来编译我们的代码
	sass sass文件 css文件 配置
	配置：-C 避免输出缓存文件		--sourcemap=none 避免输出sourcemap文件
	sass ./demo.scss ./demo.css -C --sourcemap=none
工程化编译sass
	对webpack来说sass文件也是资源，可以模块化打包加载
	我们要装sass-loader,使用方式跟less一样
		style-loader!css-loader!sass-loader
	注意：本地安装sass,sass-loader依赖node-sass

4 嵌套语法与&

嵌套式语法
	使用预编译语言最大的特点就是可以使用嵌套式语法，也就是说直接在一个选择器中使用另一个选择器并书写样式
	编译的时候会将内外选择器同时保留，外部选择器类似命名空间，确保选择器名称不会相互覆盖
	嵌套的时候，我们可以使用&符号获取当前选择器

5 属性嵌套

在sass中支持复合属性嵌套定义
复合属性：一个属性可以代表多个属性的属性
	margin:margin-top, margin-bottom, margin-right, margin-left
复合属性定义的语法：
	parentProps: { childProps: value; }
	
	margin: {
		top: 20px;
		left: 50px;
		bottom: 40px;
		right: 30px;
	}

6 变量

sass支持变量
	语法$key: value;
	全局的变量，任何模块都能使用
	局部的变量，只能在当前模块中使用，模块外部无法使用
	不支持声明前置
尽量将变量定义在最前面

// 全局变量
$color: red;

.demo {
    // 局部变量
    $size: 20px;
    color: $color;
    // 当前模块下使用局部变量
    font-size: $size;
}
.box {
    color: $color;
    // 其它模块中，不能使用局部变量
}
// 不支持声明前置，常常将变量定义在最前面

.test {
    // width: 1px + 1in;
    // width: 1px - 1;
    // 乘法
    // width: 10 * 5px;
    // 除法
    // width: (20px / 5);
    // $size: 50px;
    // width: $size / 2;
    // width: max(10px, 20px, 30px) / 10;
    // width: 10px / 2 + 5px;

    // 单位
    // width: (20px / 5);
    // width: (20px / 5px);

    // 色彩运算
    $color1: #5588aa;
    $color2: #229933;
    $color3: rgba(100, 200, 50, 0.5);
    $color4: rgba(50, 100, 100, 0.5);
    $color5: rgba(30, 20, 50, 0.6);
    color: $color3 + $color4;
    
}

7 运算

数学运算
	sass支持加减乘除运算，但是运算是有物理意义的
	加减法：运算时候会做单位转换。保留是第一个加数或者被减数的单位
	乘法：只能有一个乘数带单位
	除法：默认不会执行除法。在css中，font属性的属性值可以是字号比行高，所以/默认不执行除法，
	想执行除法，必须满足三个条件之一
		1 必须有()
		2 必须出现变量或者方法的返回值
		3 是表达式的一部分（除了除法，还有其它的运算）
			单位：10/2		10是被除数，2是除数
	如果被除数有单位，除数单位可有可无，有单位单位抵消。如果被除数没有单位，除数一定不能有单位

色彩运算
	在sass中，色彩可以进行运算
	必要条件是：色彩的透明度必须一致
	运算的时候，每个通道单独运算的，透明度通道不运算
		运算过程中，通道之间不会进位或者借位
			一个通道的值只能在0-255(00-ff)之间
字符串运算
	sass允许字符串，就是字符串拼接

8 混合

sass中的混合也是为了复用一组样式
	语法@mixin 混合名称 {
		// 定义样式
	}
	使用混合@include 混合名称
特点
	1 混合在编译的时候，删除了，当多次使用混合的时候，并没有合并选择器，是真正的复制
	2 不支持声明前置，其它模块的混合在当前模块内不能使用
	所以sass中的混合相当于less中的方法

// 定义混合
// @mixin size {
//     width: 20px;
//     height: 30px;
// }

// .demo {
//     // 使用混合
//     @include size;
// }

// .box {
//     // 使用混合
//     @include size;
// }


// 定义混合
// @mixin size($w, $h) {
//     width: $w;
//     height: $h;
// }
// 默认参数
// @mixin size($w: 10px, $h: 20px) {
//     width: $w;
//     height: $h;
// }
// .demo {
//     // @include size(100px);
//     // 如果一个参数都不传递，可以省略参数集合
//     @include size;
// }


// 通过混合复用样式
// @mixin box-shadow($bx1, $bx2) {
//     -webkit-box-shadow: $bx1, $bx2;
//     -moz-box-shadow: $bx1, $bx2;
//     -ms-box-shadow: $bx1, $bx2;
//     -o-box-shadow: $bx1, $bx2;
//    box-shadow: $bx1, $bx2;
// }
// @mixin box-shadow($bx...) {
//     -webkit-box-shadow: $bx;
//     -moz-box-shadow: $bx;
//     -ms-box-shadow: $bx;
//     -o-box-shadow: $bx;
//    box-shadow: $bx;
// }
// 前面还可以添加变量
@mixin box-shadow($h: 100px, $bx...) {
    height: $h;
    -webkit-box-shadow: $bx;
    -moz-box-shadow: $bx;
    -ms-box-shadow: $bx;
    -o-box-shadow: $bx;
   box-shadow: $bx;
}

// 兼容浏览器
.demo {
    // @include box-shadow(1px 2px red, 6px 8px green);
    @include box-shadow(500px, 1px 2px red, 6px 8px green)
}

混合传参
	定义参数的语法，跟定义变量的语法是一样的，并且可以传递默认参数
	语法 @mixin 混合名称($arg1: val1, $arg2: val2) {
		//定义样式
	}
使用混合@include 混合名称(val1, val2);
	如果定义了默认参数，使用混合的时候，可以不用传递参数
	如果是一个参数都不传递，我们可以省略参数集合
	如果没有定义默认参数，使用混合的时候，必须传递参数

获取剩余参数
	在less中获取剩余所有参数用@arguments
	在sass中获取剩余参数语法跟ES6语法相似，使用三个点语法
		sass中，三个点语法在变量之后
		@mixin demo($arg1, $arg2, $agr...) {}
			arg获取从第三个参数后面所有的参数。前面的参数可以正常使用
	兼容浏览器，有时候，通常我们为了将css3样式兼容所有的浏览器，而添加浏览器前缀，要书写很多遍，此时我们可以通过混合复用样式，提高开发效率，通常将混合名称定义成css样式名称，并且在混合中，只设置一个样式

9 继承

为了复用选择器的样式，sass提供了继承，跟less中的混合式一样的
	less中的方法式sass中的混合
	less中的混合是sass中的继承
定义继承就是定义选择器，sass支持四类继承选择器：
	类选择器，id选择器，元素名称选择器，自定义元素名称选择器
使用继承：@extend继承选择器
	特点：
		1 继承的选择器在编译的时候会保留
		2 编译的时候，合并了选择器，而不是复制样式，相对来说效率更高

如果不想在编译的时候保留选择器样式，我们可以使用选择器占位符%
我们在选择器前面添加%占位符，此时该选择器在编译的时候会删除
	注意：只有元素名称和自定义元素名称选择器可以使用%占位符，id选择器和类选择器无法使用
	一旦添加占位符，@extend继承选择器的时候，也要添加占位符
sass中的继承支持声明前置，所以，尽量将他们定义在最前面
局部继承
	当前模块可以使用
	其它模块可以直接使用，但是有意想不到的结果，因此不建议使用局部继承

// 定义选择器
#demo {
    color: red;
}
.test {
    font-size: 20px;
}
div {
    width: 20px;
}
ickt {
    height: 50px;
}

.title {
    @extend #demo;
    @extend .test;
    @extend div;
    @extend ickt;
}

10 插值与引入文件

sass插值语法#{$key}
	跟less一样，sass中插值有三种方法
		1 在字符串中插值
		2 在选择器上插值
		3 在属性名称上插值
引入文件有两种方式
	@import url(url)	css引入方式（编译的时候保留）
	@import url			sass引入方式（编译的时候删除）

base.scss:

	$day: '-';
	$num: 10;
	$dir: top;
	
	// 注意：不要在被引入的文件中写选择器，否则会被复制多次，可以写%占位符解决
	%div {
	    height: 50px;
	    background-color: pink;
	}

demo.scss:

// 引入文件
// 以css方式引入
// @import url('./base.scss');
// scss引入方式
@import './base.scss';

// $day: '-';
// $num: 10;
// $dir: top;

// 字符串插值
div:after {
    content: '今天是星期#{$day}';
}
// 选择器插值
.demo-#{$num} {
    color: red;
}
// 属性名称插值
p {
    border-#{$dir}-color: red;
}


// 制作三角形的混合
@mixin arrow($w: 10px, $c: #000, $dir: top, $l: $w) {
    border: $w solid transparent;
    border-#{$dir}-color: $c;
    font-size: 0;
    width: 0;
    // 判断
    @if $dir == top or $dir == bottom {
        border-top-width: $l;
        border-bottom-width: $l;
    } @else {
        border-left-width: $l;
        border-right-width: $l;
    }
}

strong {
    @include arrow;
}
h1 {
    @include arrow(20px, red, left, 100px);
}

11 条件语句

sass支持if条件语句，语法跟js中的if条件语句类似
	js中的条件语句	if () {} else {}
	sass中的条件语句	@if {} @else {}
对比js语法
	相同的：
		1 关键字：(js: if, else if, else.	sass: @if, @else if, @else)
		2 条件体：都是通过{}定义
		3 比较运算符：>, <, >=, <=, ==
	不同点：
		1 js中，条件定义在条件集合()中，sass不需要(),直接写条件
		2 逻辑运算符
			js中“与”用“&&”表示，“或”用“||”表示
			sass中“与”用“and”表示，“或”用"or"表示

12 循环语句

跟js中的for循环一样，sass也支持循环语句，也用@for关键字定义，有两种语法
	@for $i from start through end {}
	@for $i from start to end {}
		@for:表示循环语句关键字
		$i：表示循环变量
		from, through, to:都是循环关键字
		start:表示循环的起始值
		end:表示循环的终止值
		默认每次循环增量都是1
	through与to的区别是：
		through:最后一次循环包含end值
		to:最后一次循环不包括end值
	循环语句通过{}定义了代码块，因此循环语句中定义的变量，外部无法使用

div {
    height: 20px;
    margin-bottom: 10px;
}
// 基础颜色
$color: #060402;
// 循环语句设置
// @for $i from 1 through 100 {
//    .item-#{$i} {
//     background-color: $color * $i;
//    }
// }
// through包含end,to不包含end
// 循环内部的变量，外部无法使用
@for $i from 1 to 100 {
   .item-#{$i} {
    background-color: $color * $i;
   }
}

13 while循环

在for循环中，增量始终是1，我们无法改变，如果想自定义循环增量，可以使用while循环
语法：
	定义循环变量
	@while 循环条件 {
		定义循环体（定义样式）
		改变循环变量
	}
由于循环变量定义在了循环外部，因此在循环外部可以继续使用循环变量

div {
    height: 20px;
    margin-bottom: 10px;
    background-color: pink;
}
// 循环变量
// $i: 1;
// // 定义循环
// @while $i <=100 {
//     .item-#{$i} {
//         background-color: green;
//     }
//     // 更改循环变量
//     $i: $i + 2;
// }

// for循环：每次循环的增量都是1
// while训话：可以自由的定义循环增量，但是必须是有规律的

// 枚举循环
@each $i in aaa, bbb, ccc {
    .#{$i} {
        background-color: green;
    }
}

// 三元运算符
div {
    width: if(true, 200px, 500px);
}
div {
    width: if(false, 200px, 500px);
}
$num: 10;
div {
    width: if($num > 5, 200px, 500px);
}

14 枚举循环

for循环的循环增量是1，while循环中可以自定义循环增量，但是循环增量始终是固定的，如果想循环一个没有规律的聚合数据，我们可以使用枚举循环
语法：
	@each $i in 枚举体 {}
		@each	枚举循环关键字
		$i		是循环变量
		in		循环关键字
		枚举体	  多个个体用逗号隔开
注意：如果枚举的个体命中了sass内置的数据变量，如red, green, blue等，使用的时候，要添加引号