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

站长

2022年11月12日 16:57 · 阅读数 45

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

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>

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

!global

Scss 中我们可以使用 !global 关键词来设置变量是全局的。

注意： 所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。

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

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

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

计算功能

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

<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;
  };   
}

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

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

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

4. 注释

Scss 共有两种注释风格。

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

/*!
　重要注释！
*/