Sass
Sass 是一种 CSS 预处理器，它增加了变量、嵌套、混合（mixins）、函数等功能，使得 CSS 的编写更加灵活和可维护。Sass 有两种语法：SCSS（Sassy CSS）和缩进语法（Sass）。SCSS 是 Sass 的一种语法，它与 CSS 的语法非常接近，因此对于熟悉 CSS 的开发者来说，学习和使用起来相对容易。
- 用Sass变量存储数据
- 用Sass嵌套CSS
- Create Reusable CSS with Mixins
- Use @if and @else to Add Logic To Your Styles
- Use @for to Create a Sass Loop
- Use @each to Map Over Items in a List
- 使用@while循环创建样式
- 用Partials将样式分成小块
- 将一组CSS样式扩展到另一个元素
<style type='text/scss'>
// 使用$定义变量，并使用
$text-color: red;
p {
text-color: $text-color;
}
------------------
// 如下写法
article p {}
article h1 {}
...
// 相当于
article {
p {}
h1 {}
}
------------------
// 函数化：函数声明关键字 @mixin cssName($parame: default, $parame, ...) {}
@mixin shape($w, $h, $bg-color) {
color: $w;
...
}
// 调用函数：@include cssName();
p {
@include shape(black, ...);
}
------------------
// if-else 使用@声明，无括号
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
------------------
// @for 循环 分 A to B 和 A through B 两钟用法，开闭区间
// @while 同理 $x: $x + 1; 避免死循环即可
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
// #{$i} 将i准换为字符串， 注意css元素前的 . 符号
// => .col-1 {width: 8.33%;} ... .col-12 {width: 100%;}
}
------------------
// for-each循环
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
// 映射 请注意，需要$key变量来引用映射中的键。
// 否则，编译后的CSS会有color 1，color 2...
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
</style>
使用Partials将css分成小块，分为类似main.scss和_partialsName.scss的结构，与main.c model.c model.h的关系类似.
// 导入scss文件: _scssName.scss
// 忽略文件前的_符号与.scss扩展名，_为scss子文件的标识符
@import 'scssName'
---------------------
// 继承
.panel { ... }
.big-panel {
@extend .panel; // 继承panel的参数
}
学习 Sass 仍然是有必要的，尤其是在现代前端开发中。以下是几个原因：
- 提高工作效率：Sass 提供了变量、嵌套规则、混合（Mixins）、继承等特性，这些功能使得编写和维护 CSS 代码变得更加模块化和可维护。
- 更好的可扩展性：通过 Sass 的继承和包含功能，可以轻松重用现有的样式代码，并在需要时进行修改，有助于保持代码的整洁和一致性。
- 易于维护：Sass 的注释和文档功能可以帮助你为样式代码添加必要的说明和文档，这对于团队成员理解和维护代码非常有帮助。
- 支持多种平台：Sass 不仅适用于 Web 开发，还可以用于其他平台和框架，如 React Native 和 Vue.js，这意味着你可以在多个项目中应用所学知识。
- 社区支持：Sass 拥有庞大的开发者社区，当你遇到问题时，可以轻松找到解决方案或寻求帮助。
- 减少冗余代码：CSS 预处理器提供了 CSS 层缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。
- 适应复杂项目：Sass 的功能比 Less 强大，适用于复杂或大型项目，而 Less 相对而言更适合小型项目。
- 多种输出选项：Sass 提供多种输出选项，如 nested/compact/compressed/expanded，输出样式的风格可以有多种选择，默认为 nested。
