04-语法风格变量

发表于 | 分类于 |

语法格式

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且==末尾结束处都有一个分号==。其文件名格式常常以“.scss”为扩展名。

1.嵌套输出方式 nested
2.展开输出方式 expanded
3.紧凑输出方式 compact
4.压缩输出方式 compressed

变量

Sass 的变量包括三个部分：
1.声明变量的符号“$”
2.变量名称
3.赋予变量的值

普通变量与默认变量

普通变量

定义之后可以在全局范围内使用。

1
2
3
4
$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译后的css代码：

1
2
3
body{
    font-size:12px;
}

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

1
2
3
4
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

1
2
3
body{
    line-height:1.5;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量==之前==重新声明下变量即可。

1
2
3
4
5
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

1
2
3
body{
    line-height:2;
}

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

局部变量和全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

css 的结果：

1
2
3
4
5
6
7
8
9
10
//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

只有满足所有下述标准时方可创建新变量：
1.该值至少重复出现了两次；
2.该值至少可能会被更新一次；
3.该值所有的表现都与变量有关（非巧合）。