CSS预处理器Sass

1. 变量（Variables）：

变量在Sass中以$开头，用于存储值，以便在多个地方重用。

   $primary-color: #007BFF;body {color: $primary-color;}

2. 嵌套规则（Nested Rules）：

Sass允许将CSS规则嵌套在相关的规则内，使代码更整洁。

   nav {ul {margin: 0;padding: 0;li {display: inline-block;}}}

编译后的CSS：

   nav ul {margin: 0;padding: 0;}nav ul li {display: inline-block;}

3. 混合（Mixins）：

Mixins用于创建可复用的代码块，可以接受参数。

   @mixin button-style($color) {background: $color;border-radius: 4px;padding: 10px 20px;}.primary-btn {@include button-style($primary-color);}.secondary-btn {@include button-style(#6C757D);}

4. 继承（Inheritance）：

使用@extend关键字可以让一个选择器继承另一个选择器的样式。

   .btn {font-size: 16px;text-decoration: none;}.primary-btn {@extend .btn;background: $primary-color;}

5. 列表（Lists）：

列表用于存储多个值，可以是逗号分隔或空格分隔。

   $grid-columns: 12;$gutter-width: 20px;.container {width: calc((100% / $grid-columns) - ($gutter-width * ($grid-columns - 1)));}

6. 映射（Maps）：

映射用于存储键值对，类似JavaScript的对象。

   $breakpoints: (small: 480px,medium: 768px,large: 1024px);@each $breakpoint, $width in $breakpoints {@media (min-width: $width) {.container {max-width: $width;}}}

7. 函数（Functions）：

自定义函数可以处理值并返回结果。

   @function calculate-size($ratio, $base-size) {@return $base-size * $ratio;}.element {width: calculate-size(0.5, 100px);height: calculate-size(0.75, 100px);}

8. 导入（@import）：

使用@import导入其他Sass文件。

   // variables.scss$primary-color: #007BFF;// mixins.scss@mixin button-style($color) {/* ... */}// styles.scss@import 'variables';@import 'mixins';.primary-btn {@include button-style($primary-color);}

9. 选择器层级（Selector Nesting）：

可以通过层级选择器来组合和简化CSS选择器。

   .parent-class {&__child-class {/* ... */}}

10. 注释（Comments）：

Sass支持两种注释，单行//和多行/* … */，其中多行注释在编译后会被保留。

11. 条件语句（Conditional Statements）：

Sass提供@if, @else if, 和 @else来实现条件逻辑。

    $is-mobile: false;.content {@if $is-mobile {font-size: 14px;} @else {font-size: 18px;}}

12. 循环（Loops）：

使用@for、@each和@while来迭代和重复代码。

    // 使用@for循环生成CSS序列@for $i from 1 through 5 {.item-#{$i} {width: 100px * $i;}}// 使用@each遍历列表$fonts: Arial, sans-serif, Georgia, serif;@each $font in $fonts {body {font-family: $font, #{$font + ', '};}}// 使用@while循环$count: 5;@while $count > 0 {.loop-#{$count} {content: "Count: #{$count}";}$count: $count - 1;}

13. 嵌套媒体查询（Nested Media Queries）：

与CSS规则类似，Sass允许嵌套媒体查询，使代码更整洁。

    .element {color: black;@media (min-width: 600px) {color: white;}}

14. 延展（Extend）的更高级用法：

使用@extend可以创建更复杂的继承关系，例如与伪类和伪元素结合。

    %hover-state {&:hover {background: darken($primary-color, 10%);}}.primary-btn {@extend %hover-state;background: $primary-color;}

15. 模块化和BEM方法论：

结合Sass的特性，如嵌套规则和变量，可以实现BEM（Block Element Modifier）方法论，提高代码的可维护性。

    .button {&__text {font-weight: bold;}&--primary {background: $primary-color;}&--secondary {background: $secondary-color;}}

16. 嵌套选择器的注意事项：

虽然嵌套选择器使代码更易读，但过度嵌套可能导致CSS体积过大，影响性能。尽量保持选择器简洁，避免过深的嵌套。

17. Sass的版本和兼容性：

注意Sass有两个主要版本：SCSS（Sassy CSS）和indented syntax（Sass）。SCSS更现代，更接近CSS语法，而indented syntax使用缩进表示嵌套。大多数现代项目使用SCSS。

18. 自动化工具：

结合自动化工具（如Webpack、Gulp或Grunt）和构建系统，可以自动化Sass编译和优化过程，确保生产环境的CSS是最优的。

19. 响应式设计和媒体查询：

使用Sass的嵌套媒体查询，可以更方便地编写响应式CSS。

    .container {width: 100%;@media (min-width: 768px) {width: 80%;float: left;}}

20. 自定义函数（Custom Functions）：

定义自定义函数，可以处理复杂的计算或逻辑。

    @function calculate-spacing($size, $multiplier: 2) {@return $size * $multiplier;}.element {padding: calculate-spacing(10px);}

21. 运算符（Operators）：

Sass支持算术、比较和逻辑运算符，使得在CSS中进行计算更加方便。

    .box {width: 100px + 50px;height: 200px - 50px;margin: 5px * 2;opacity: 0.5 / 2;}

22. 嵌套选择器的限制：

虽然嵌套选择器很有用，但过度嵌套可能导致CSS难以理解和维护。尽量保持选择器深度不超过3级，以防止过于复杂。

23. Sass的错误处理：

当Sass遇到语法错误时，它会生成错误消息，帮助你找到问题所在。了解这些错误信息可以帮助你更快地调试代码。

24. Sass的调试（Debugging）：

使用@debug语句可以在编译过程中输出变量和表达式的信息，帮助调试。

    $value: 10px;@debug "Value is: #{$value}";

25. Sass的源映射（Source Maps）：

开发时启用源映射，可以使浏览器开发者工具在编辑Sass源文件时，显示原始的Sass代码，而非编译后的CSS。

26. Sass的@use和@mixin规则：

新版Sass（Sass 7.0+）引入了@use规则来代替@import，并提倡使用@mixin而不是@extend，以提高CSS的可维护性和性能。

27. Sass的模块系统：

使用@use规则可以组织代码为模块，每个模块有自己的作用域，避免变量和选择器冲突。

    // _variables.scss$primary-color: #007BFF;// _buttons.scss@use 'variables';.button {background: variables.$primary-color;}

28. 保持Sass代码简洁：

与编写任何代码一样，保持Sass简洁、清晰和模块化，遵循DRY（Don’t Repeat Yourself）原则，避免冗余代码。

2500G计算机入门到高级架构师开发资料超级大礼包免费送！