SCSS学习笔记

参考资料：

SCSS中文网

SCSS中文官网

SCSS与CSS区别

SCSS是CSS的超集，支持CSS。相对于CSS，SCSS支持变量、继承、混入、嵌套、运算、函数等。

SCSS在线转换CSS

语法

嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。font、 border 后面必须加上冒号。在嵌套的代码块内，可以使用 & 引用父元素。

变量

使用 $ 符号表示，可以存储字符串、数字、颜色值、布尔值、列表、null 值等信息。默认变量仅需在值后面加上 !default 即可。

变量的目的是为了在重复使用某一个样式参数时，可以用变量代替，如果此样式需要修改，不用一处一处修改，直接修改变量即可。

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

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

作用域

花括号{}用来设置作用域。但可以使用 !global 关键词来在局部作用域内设置一个全局的变量。

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

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

此时color属性值为green。

计算功能

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

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

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

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