Scss 基本使用（变量嵌套）

Posted 2021-12-24 明天也要努力

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中文网

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>

作用域

变量的作用域只能在当前的层级上有效果。
如下所示 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 源文件中，编译后被省略。
在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
　重要注释！
*/