SCSS 入门语法基础
🎯 引言
如果你刚开始接触前端，听说过 SCSS 但不太明白它怎么用，这篇文章正适合你。通过学习 SCSS 的基础语法、变量、嵌套和注释，还有如何将 SCSS 编译成浏览器能识别的 CSS，你会发现写样式变得更加简单和有趣。SCSS 不仅让代码更清晰，还能帮你快速提升开发效率！
🌿 嵌套写法 —— 让 CSS 更有层次感
传统的 CSS 写法，选择器一个个写，层级关系不明显，代码有时显得杂乱无章。SCSS 的嵌套写法就像给 CSS 加上了“目录结构”，代码看起来更整洁，也更容易维护。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: blue;
&:hover {
color: red;
}
}
}
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: blue;
}
nav ul li a:hover {
color: red;
}
这个例子展示了导航条的嵌套写法，
nav里面包含ul，ul里面包含li，li里面包含a，伪类:hover用&符号引用父选择器，写法简洁又直观。
嵌套写法中的伪类 👻
伪类如 :hover、:active、:focus 在 SCSS 中通过 & 来表示当前父选择器，避免了重复写选择器名。
button {
background-color: green;
color: white;
&:hover {
background-color: darkgreen;
}
&:active {
background-color: limegreen;
}
}
button {
background-color: green;
color: white;
}
button:hover {
background-color: darkgreen;
}
button:active {
background-color: limegreen;
}
💡 变量声明与使用 —— 减少重复，方便维护
CSS 中颜色、字体大小、间距常常复用，SCSS 用变量帮你管理。改动时只需改变量值，所有引用自动更新，超方便。
$primary-color: #3498db;
$padding-base: 16px;
$font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
body {
font-family: $font-stack;
color: $primary-color;
padding: $padding-base;
}
button {
background-color: $primary-color;
padding: $padding-base / 2;
border: none;
border-radius: 4px;
color: white;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #3498db;
padding: 16px;
}
button {
background-color: #3498db;
padding: 8px;
border: none;
border-radius: 4px;
color: white;
}
变量名前必须以
$开头，变量名建议用有意义的英文单词，方便阅读和维护。
📝 注释：单行 vs 多行
代码注释很重要，SCSS 支持两种注释方式：
// 这是单行注释，编译后不会出现在 CSS 中
/*
这是多行注释
可以写多行说明
编译后默认会保留在生成的 CSS 文件中
*/
/*
这是多行注释
可以写多行说明
编译后默认会保留在生成的 CSS 文件中
*/
//。多行注释会默认保留，影响文件大小。🚀 编译 SCSS 的方式
SCSS 是一种预处理语言，浏览器并不能直接识别，所以我们需要编译成标准 CSS。
1. Koala（图形界面工具）
Koala 是一款跨平台的 GUI 编译器，适合前端初学者或不熟悉命令行的开发者。
2. Dart-sass
这是 Sass 官方团队维护的版本，支持最新语法，是当前唯一被官方积极维护的 Sass 实现。
npm install -g sass
sass input.scss output.css
3. Sass 官方在线 Playground
Sass 提供了一个强大的在线编译器，适合快速尝试代码、测试语法或演示功能。能够实时将 Scss 样式编译成 CSS。
访问地址：https://sass-lang.com/playground/
4. Webpack 编译
在实际开发中，推荐使用 Webpack 等构建工具集成 SCSS 编译流程。这样可以自动处理样式依赖、热更新、压缩等功能，更适合中大型项目。
🧾 小节总结
- SCSS 的嵌套写法让样式层级关系更明显，代码更整洁，伪类和媒体查询都能轻松嵌套。
- 变量声明极大方便了样式的统一管理，改动快捷，减少重复。
- 注释有单行和多行两种，单行注释不会编译到 CSS 里，多行注释默认会被保留。
- 编译 SCSS 的方式多样，推荐使用 Dart-sass，线上也有方便的在线编译器可用。
❓ 知识问答（Q&A）
Q：SCSS 中如何嵌套伪类？
A：使用 & 符号表示父选择器，然后跟伪类名称，比如 &:hover。
Q：SCSS 变量如何声明？
A：通过 $变量名: 值; 声明，变量名前必须加 $。
Q：多行注释会不会出现在最终的 CSS 文件中？
A：默认会保留，如果不想保留，应该使用单行注释 //。
🎉 恭喜你已经掌握 SCSS 的嵌套写法、变量使用、注释方法和编译技巧啦！