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

article/2025/11/5 10:40:08

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 divisionheight: (500px/2);          // Uses parentheses, does divisionmargin-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 源文件中，编译后被省略。
在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。/*!重要注释！
*/