前言:本节开始学习Sass的语法。
1.sass的基础语法。
<1>sass中的变量?
sass中的变量声明以$符号开头。
局部变量:只在当前作用域有用。
body { $color: skyBlue; // body中声明的$color变量只在当前body大括号中有用。 color: $color; } footer { color: $color; // 报错 Error: Undefined variable: "$color".
}
上例中,$color变量只在body大括号中有用,footer中引用$color变量报变量未定义的错。
全局变量:
1.声明在所有作用外:将$color变量声明在所有作用域之外。
$color: skyBlue; body { color: $color; } footer { color: $color; }
2.添加!global修饰:在$color变量颜色值之后添加 !global修饰符。
body { $color: skyBlue !global; color: $color; } footer { color: $color; }
变量默认值:为变量声明默认值,在变量未重新赋值时作为变量值。
$fontSize: 14px; // 重新赋值为14px; $fontSize: 12px !default; //font-size的默认值为12px; body { $color: skyBlue !global; color: $color; font-size: $fontSize; } footer { color: $color; }
多值变量:一个变量中定义了多个值。
list类型:通过nth($list, index),其中list为变量名,index表示值的索引(从1开始计算)
$paddings: 3px 10px 5px 10px; body { $color: skyBlue !global; color: $color; padding: $paddings; } footer { color: $color; padding-left: nth($paddings , 1); //通过nth($padding, 1)获取变量中的第一个值,注意这里的索引从1开始。 }
map类型:键值对的形式组成,通过map-get(map变量,键)获取值。
$colors: (color: red, borderColor: blue); body { $color: skyBlue !global; color: $color; } footer { color: $color; background-color: map-get($colors, color); }
变量特殊用法:
作为类名:
$className: main; .#{$className} { width: 100px; height: 50px; }
<2>sass中的样式导入?
部分文件:专门为导入而编写的sass文件,编译不会生成对应的css文件,文件名通常以下划线开头。
导入语法:@import 'sass文件'
注意:sass中样式导入关键字和css原生样式导入关键字一样都是@import,这里如何作区分呢?
原生导入:导入文件不会被编译。
1.导入文件以.css结尾。
2.被导入文件的名字是一个url地址。
3.被导入文件的名字是CSS的url的值。
sass导入举例:_part1.scss文件编译成了对应的样式。
总结:本节主要学习sass语法中的变量和样式的导入,其他的语法再继续学习。