1.变量
在Sass中可以定义变量，变量以$开头+变量名，使用冒号(:)来为变量赋值（相当于传统的=号）。字符串不需要引号。
$red: #132132;
boby {
background-color : $red;
}
可以为变量定义后面添加 !default来设置默认变量。
/* blue覆盖red */
$color: bule;
$color: red !default;
body {
color: $color;
border: 1px solid $color;
}
按照常规的覆盖方案，似乎用不着设置默认变量，只需要把被覆盖的变量放在上方，如下所示。
/* blue覆盖red */
$color: red;
$color: bule;
body {
color: $color;
border: 1px solid $color;
}
但是如果是为局部变量设置默认变量那就不一样，代码如下所示。
/* blue覆盖red */
$color: bule;
body {
$color: red !default;
color: $color;
border: 1px solid $color;
}
当然这样的技巧还有很多。
还可以把变量嵌入sass任何地方中，从而动态调整属性。格式为#{$变量名}。
$side:top;
div {
border-#{$side}-radius:10px;
}
2.嵌套
Sass 的嵌套分为三种：
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
在sass选择器嵌套中，可以在内部使用&字符代替当前选择器，具体效果如下。
scss文件：
nav {
a {
color: red;
header & {
color:green;
}
}
}
css效果：
nav a {
color:red;
}
header nav a {
color:green;
}
在sass属性嵌套中，可以把属性前缀名拆开来设置属性，具体效果如下
scss文件：
/* 注意，border后面必须加上冒号。 */
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
css效果：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
伪类嵌套和属性嵌套非常类似，也需要借助&符号一起配合使用
scss文件：
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
css效果：
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
3.计算
在sass中可以使用常规的+（加）、-（减）、*（乘）、/（除）、%（求模）。在运算中，操作符的优先级和常规编程语法一样：
1.括号优先级最高
2.乘法，除法优先于加法，减法
加法必须要单位相同，或者只为其中一边添加单位。减法也同理。
h2 {
font-size:5px + 2em; //错误！！！编译报错
font-size:5px + 2; //7px
font-size:5 - 2px; //3px
}
p {
color: #010203 + #040506; // 颜色也可以做加法运算
}
乘法和加减法有所不同，在乘法中其中一个因数是倍数，所以只能有一个因数带单位，如下所示。
body {
font-size: 30 * 1.1px; // 33px
font-size: 30px * 1.1; // 33px
font-size: 30px * 1.1px; // 报错
}
p {
color: #010203 * 2; // 颜色也可以做乘法运算
}
除法与乘法不同，除法符号/，在css某些属性的简写下，是可以直接书写的。
比如：
font: 16px/24px Arial;
由于这样的css属性，所以sass重载了该符号，不能直接当除法使用。
所以在如在以下情况，是不做除法运算的。
nav {
//不执行除法操作
margin:16px / 24px;
//使用变量嵌入，不执行除法操作
$base-size: 18px;
$line-height: 10px;
font-size: #{$base-size} / #{$line-height};
}
在如下情况是做除法运算的，但是和乘法不同，允许被除数和除数都带相同单位。
//使用括号之后，执行除法操作，结果为2，而不是2px
font-size: (10px / 5px);
//若除法结果不带单位，可以加上一个带单位的数，结果为5em。
font-size: (10px / 5px) + 3em;
//使用变量，执行除法操作，结果为2，而不是2px
$base-size: 10px;
$line-height: 5px;
font-size: $base-size / $line-height;
//使用算术操作符，执行除法操作
font-size: 2px / 4px + 3px;
而且和乘法不一样的是，被除数是必须带单位，除数则根据需要可带单位，或者不带单位（被除数 / 除数 = 商）。具体效果如下所示：
.box {
margin:(10px / 5); // 结果为2px，有单位
margin:(10px / 5px); // 结果为2，无单位
margin:(10 / 5); //结果为2，和上面等价
margin:(10 / 5px); //报错
}
4.注释
在sass中有两种注释，一种是编译后注释内容会被忽略，另一种情况是编译后注释内容会保存。
// （编译后被省略）
/* （保留到编译后） */
5.混合宏@mixin
- 混合宏是一个可以复用的代码块，定义好之后可在其他代码块中调用。类似一个方法。
无参数混合宏
在 Sass 中，使用“@mixin”来声明一个混合宏，调用一个宏命令为@include mixinName。如：
/* 定义宏命令 */
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
.nav {
@include border-radius; // 调用宏命令
}
border-radius是混合宏的名称。
带参数混合宏
除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：
@mixin box($radius: 5px, $margin: 1px) {
-webkit-border-radius: $radius;
border-radius: $radius;
margin: $margin;
}
.nav{
@include box(10px, 5px); // 调用宏命令
@include box($margin: 5px); // 只为margin传值，radius使用默认值
}
若调用时不传参数，则默认为redius=5px，margin=1px。
多值的混合宏：
有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代。
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.nav {
@include box-shadow(0 2px 2px rgba(0,0,0,.3),
0 3px 3px rgba(0,0,0,.3),
0 4px 4px rgba(0,0,0,.3));
}
6.继承
- 在 Sass 中也可以继承，可以继承类中的样式代码块。在 Sass中通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：
.line {
border: 1px solid #eee;
font-size: 16px;
}
.h2 {
background-color: yellow;
@extend .line;
}
.h3 {
background-color: red;
@extend .line;
}
7.占位符
占位符是解决了早期继承中代码冗余的情况（不过现在的sass版本，继承已经没有这个问题了，但调用混合宏会有代码冗余）。什么叫代码冗余？早期继承会产生这样的问题，css无法成解析成组选择器。占位符格式为%name，name必须以字母或下划线开头。以上面代码为例，早期不用占位符来继承解析出来的css如下。
/* -----------.scss文件--------------- */
.line {
border: 1px solid #eee;
font-size: 16px;
}
.h2 {
background-color: yellow;
@extend .line;
}
.h3 {
background-color: red;
@extend .line;
}
/* -----------.css文件--------------- */
.line {
border: 1px solid #eee;
font-size: 16px;
}
.h2 {
background-color: yellow;
border: 1px solid #eee;
font-size: 16px;
}
.h3 {
background-color: red;
border: 1px solid #eee;
font-size: 16px;
}
如果使用占位符，代码相对简洁，同时父类不会编译出来，不用考虑到父类编译出来对整个样式的影响。这样就可以通过占位符的相互继承关系，在样式中调用。代码如下所示：
/* -----------.scss文件--------------- */
%line {
border: 1px solid #eee;
font-size: 16px;
}
.h2 {
background-color: yellow;
@extend %line;
}
.h3 {
background-color: red;
@extend %line;
}
/* -----------.css文件--------------- */
.h2, .h3 {
border: 1px solid #eee;
font-size: 16px;
}
.h2 {
background-color: yellow;
}
.h3 {
background-color: red;
}
在对基类继承、占位继承、混合宏调用的使用的场合要把握好。
结语
以上是sass的基础部分，到这里就结束了，sass的细节问题还需要大家在掌握基础的层次上深入学习。接下来会在学习的过程中继续更新Sass语法（2）
网友评论