CSS预处理器Sass
文末有超多前端资料~已帮助500+名同学完成改造！
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）原则，避免冗余代码。
需要超多前端笔记的同学转发本文+关注+【 点击此处】即可获取！ 加油
整份文档一共有几百道题万字以上，全都是近期高频面试题知识点，不仅有答案，而且有详细的解析，为了不影响大家的阅读体验就只展示了部分内容，还望大家海涵，这份文档绝对可以帮助大家提升复习效率，加大面试的成功率，也节省大家在网上搜索资料的时间来学习，最后祝所有复习过我文章里学习内容的小伙伴们，每个人都能拿到心仪offer，欢迎大家讨论交流！
标签：Sass,嵌套,color,primary,width,CSS,面基 From： https://blog.csdn.net/2401_84489283/article/details/141423260