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等,使用的时候,要添加引号