使用 SCSS 或 LESS 相比于纯 CSS 的好处

news/2025/1/16 0:59:22/

使用 SCSS 或 LESS 相比于纯 CSS 有以下几个好处：

变量支持：
- SCSS/LESS：可以定义变量用于存储颜色、字体大小、间距等值，便于在整个样式文件中复用。例如，可以定义一个颜色变量 $primary-color: #3498db;，然后在不同的地方使用这个变量。
```
css"> $primary-color: #3498db;body {color: $primary-color;}
```
- CSS：CSS 自身也引入了原生的变量（CSS Custom Properties），但 SCSS/LESS 的变量功能更加强大，支持复杂的计算和逻辑。
嵌套规则：
- SCSS/LESS：支持嵌套的选择器，使得样式更具结构性和可读性。例如，可以在一个 .header 类里面嵌套 .nav 和 .logo 的样式。
```
css">.header {.nav {margin: 0;padding: 0;}.logo {display: inline-block;}
}
```
- CSS：CSS 不支持原生的选择器嵌套，需要手动将选择器串联在一起。
运算功能：
- SCSS/LESS：支持在样式中进行数学运算，如加、减、乘、除。可以方便地进行尺寸、颜色的计算。
```
css"> .container {width: 100% - 20px;padding: 10px;}
```
- CSS：CSS 也支持一些简单的计算（例如 calc()），但 SCSS/LESS 的运算能力更为灵活强大。
Mixin（混合）和函数：
- SCSS/LESS：可以定义复用的代码块（Mixin）和函数，用于处理复杂的样式逻辑，减少重复代码。例如，可以定义一个按钮样式的 Mixin，在多个地方复用并传入不同的参数。
```
css"> @mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}.box { @include border-radius(10px); }
```
- CSS：CSS 没有 Mixin 或函数的概念，只能通过类复用一些样式，但灵活性不如 SCSS/LESS。
继承（Extend/Inherit）：
- SCSS/LESS：支持样式的继承，允许一个选择器继承另一个选择器的样式，从而减少冗余代码。
```
css"> .message {padding: 10px;border: 1px solid #ccc;}.success {@extend .message;border-color: green;}
```
- CSS：CSS 只有属性继承的概念，但不支持选择器的样式继承。
模块化和导入：
- SCSS/LESS：支持将样式拆分为多个模块，然后通过 @import 或 @use 进行引入，这有助于管理和维护大型项目的样式代码。
```
css"> // _variables.scss$primary-color: #333;// styles.scss@import 'variables';body { color: $primary-color; }
```
- CSS：CSS 也支持 @import，但引入的文件在加载时可能会阻塞渲染，SCSS/LESS 通过编译的方式处理这些导入，更加高效。
逻辑控制：
- SCSS/LESS：支持条件语句和循环语句，可以根据不同的条件生成不同的样式。
```
css"> @for $i from 1 through 3 {.col-#{$i} { width: 100% / 3 * $i; }}
```
- CSS：CSS 没有逻辑控制语句，只能通过媒体查询等方式实现部分逻辑控制。