Scss 基本使用（变量、嵌套）

1. Scss 简介

Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。
因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是 CSS 语法的扩展。
这意味着每一个有效的 CSS 也是一个有效的 SCSS 语句，与原来的语法兼容，只是用 {} 取代了原来的缩进。

传送门：Sass中文网
 传送门：Sass 教程 | 菜鸟教程
 传送门：Scss 基本使用（ @extend、 @mixin、@import、@if、@for、@while、@each ）

2. 变量

Sass 变量使用 $ 符号；
Sass 变量可以存储以下信息：字符串、数字、颜色值、布尔值、列表、null 值；

<style lang="scss">
$sysColor: red;
$sysFontSize: 20px;
$side : left;

.wrap{
  color: $sysColor;
  font-size: $sysFontSize;
  // 如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中
  border-#{$side}: 1px solid pink;
}
</style>

默认变量 !default

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

<style lang="scss">
$color:red !default;
.contanier1{
  color: $color;
}
</style>

编译出来的 CSS

.contanier1{
  color: red;
}

如果分配给变量的值后面加了 !default ，意味着该变量如果已赋值，那么它不会被重新赋值。
但是，如果它尚未赋值，那么它会被赋予新的给定值。

<style lang="scss">
$color: green;
$color:red !default;
.contanier1{
  color: $color;
}
</style>

编译出来的 CSS

.contanier1{
  color: green;
}

上述例子因为变量color已经被赋值为 green，所以再给它赋默认值时不会影响它原来的值，color 的值仍然是 green。

作用域

变量的作用域只能在当前的层级上有效果。
如下所示 contanier2 的样式为它内部定义的 green，contanier1 标签则是为 red。

<style lang="scss">
$sysColor: red;

.contanier1{
  color: $sysColor;
}
.contanier2{
  $sysColor: green;  // 只在 contanier2 里头有用，局部作用域
  color: $sysColor;
}
</style>

!global

Scss 中我们可以使用 !global 关键词来设置变量是全局的。
注意： 所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。

<style lang="scss">
$sysColor: red;

.contanier2{
  $sysColor: green !global;
  color: $sysColor;
}
.contanier1{
  color: $sysColor;
}
</style>

计算功能

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

<style lang="scss">
$sysWidth: 100px;

.contanier1{
  margin: (14px / 2);
  width: $sysWidth * 2;
  height: 100px + 50px;
}
</style>

除法运算（ / ）
/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下情况， / 将被视为除法运算符号：

如果值或值的一部分，是变量或者函数的返回值；
如果值被圆括号包裹；
如果值是算数表达式的一部分；

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; 
}

3. 嵌套

Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

<style lang="scss">
$sysWidth: 100px;

.wrap{
  .contanier1{
    width: $sysWidth * 2;
    height: 100px + 50px;
  }
}
</style>

很多 CSS 属性都有同样的前缀，如：font-family, font-size 和 font-weight ，text-align, text-transform 和 text-overflow。
在 Scss 中，可以使用嵌套属性来编写它们：
注意： font、 border 后面必须加上冒号。

.contanier1{
  font: {
    size: 25px;
    weight: bold;
  }
  border: {
    width: 1px;
    style: solid;
    color: red;
  };   
}

在嵌套的代码块内，可以使用 & 引用父元素。

.contanier1{
  font: {
    size: 25px;
    weight: bold;
  }
  &:hover{
    color: green;
  }  
}

4. 注释

Scss 共有两种注释风格。

标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在 scss 源文件中，编译后被省略。
在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
　重要注释！
*/

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141324.html