SCSS 简介
SCSS（Sassy CSS）是一种CSS预处理器，它扩展了CSS的功能，提供了许多便利的特性，使CSS的编写更加高效、可维护。SCSS 是 SASS（Syntactically Awesome Stylesheets）的一种语法格式，使用与 CSS 相似的语法，更易于 CSS 开发者上手。
SCSS 与 CSS 的区别
SCSS 是 CSS 的超集，这意味着所有有效的 CSS 代码也是有效的 SCSS 代码。SCSS 相比 CSS 增加了以下核心特性：
- 变量：可以存储颜色、字体、间距等常用值
- 嵌套规则：可以嵌套选择器，使代码结构更清晰
- 混入（Mixins）：可以定义可重用的样式块
- 继承：可以继承其他选择器的样式
- 函数和运算：支持数学运算和自定义函数
- 条件语句和循环：支持控制流语法
安装与使用
安装 SCSS
要使用 SCSS，需要先安装 Node.js，然后通过 npm 安装 sass 包：
编译 SCSS 到 CSS
安装完成后，可以使用以下命令将 SCSS 文件编译为 CSS：
1
|
sass input.scss output.css
|
也可以启用监视模式，实时编译文件变化：
1
|
sass --watch input.scss:output.css
|
基本语法
变量
SCSS 允许使用变量存储值，并在整个样式表中重复使用。变量以$符号开头：
1
2
3
4
5
6
7
8
9
|
$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;
$spacing: 16px;
body {
font-family: $font-stack;
color: $primary-color;
padding: $spacing;
}
|
编译为 CSS 后：
1
2
3
4
5
|
body {
font-family: 'Helvetica Neue', sans-serif;
color: #3498db;
padding: 16px;
}
|
嵌套规则
SCSS 允许嵌套选择器，这样可以更清晰地表示 HTML 的层次结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
|
编译为 CSS 后：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
|
父选择器引用
在嵌套规则中，可以使用&符号引用父选择器：
1
2
3
4
5
6
7
8
9
10
11
|
a {
color: #333;
&:hover {
color: #666;
}
&:active {
color: #999;
}
}
|
编译为 CSS 后：
1
2
3
4
5
6
7
8
9
|
a {
color: #333;
}
a:hover {
color: #666;
}
a:active {
color: #999;
}
|
混入（Mixins）
混入允许定义可重用的样式块，可以接受参数：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@mixin border-radius($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(10px);
}
.card {
@include border-radius;
}
|
编译为 CSS 后：
1
2
3
4
5
6
7
8
9
10
|
.button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.card {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
|
继承
使用@extend指令可以继承其他选择器的样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.base-button {
padding: 10px 20px;
border: 1px solid #ccc;
cursor: pointer;
}
.primary-button {
@extend .base-button;
background-color: #3498db;
color: white;
}
.secondary-button {
@extend .base-button;
background-color: #ecf0f1;
color: #2c3e50;
}
|
编译为 CSS 后：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.base-button, .primary-button, .secondary-button {
padding: 10px 20px;
border: 1px solid #ccc;
cursor: pointer;
}
.primary-button {
background-color: #3498db;
color: white;
}
.secondary-button {
background-color: #ecf0f1;
color: #2c3e50;
}
|
运算
SCSS 支持各种数学运算，可以用于计算尺寸、颜色等：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$width: 1000px;
.container {
width: $width;
}
.sidebar {
width: $width * 0.3;
}
.main-content {
width: $width * 0.7;
}
$primary-color: #3498db;
.hover-color {
color: $primary-color + #222;
}
|
编译为 CSS 后：
1
2
3
4
5
6
7
8
9
10
11
12
|
.container {
width: 1000px;
}
.sidebar {
width: 300px;
}
.main-content {
width: 700px;
}
.hover-color {
color: #56baeb;
}
|
条件语句
SCSS 支持@if、@else if和@else条件语句：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
@mixin text-size($size) {
@if $size == small {
font-size: 12px;
} @else if $size == medium {
font-size: 16px;
} @else if $size == large {
font-size: 24px;
} @else {
font-size: 14px;
}
}
.small-text {
@include text-size(small);
}
.large-text {
@include text-size(large);
}
|
编译为 CSS 后：
1
2
3
4
5
6
|
.small-text {
font-size: 12px;
}
.large-text {
font-size: 24px;
}
|
循环
SCSS 支持多种循环语法，包括@for、@each和@while：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// @for循环
@for $i from 1 through 3 {
.col-#{$i} {
width: 100% / 3 * $i;
}
}
// @each循环
$colors: (primary, #3498db), (secondary, #2ecc71), (danger, #e74c3c);
@each $name, $color in $colors {
.text-#{$name} {
color: $color;
}
}
|
编译为 CSS 后：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.col-1 {
width: 33.33333%;
}
.col-2 {
width: 66.66667%;
}
.col-3 {
width: 100%;
}
.text-primary {
color: #3498db;
}
.text-secondary {
color: #2ecc71;
}
.text-danger {
color: #e74c3c;
}
|
导入其他文件
使用@import指令可以导入其他 SCSS 文件：
1
2
3
4
5
6
7
8
9
10
11
|
// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
// style.scss
@import 'variables';
body {
color: $primary-color;
background-color: $secondary-color;
}
|
编译为 CSS 后：
1
2
3
4
|
body {
color: #3498db;
background-color: #2ecc71;
}
|
总结
SCSS 作为一种 CSS 预处理器，通过提供变量、嵌套、混入、继承等特性，大大增强了 CSS 的功能和可维护性。掌握 SCSS 的基本语法，可以使前端开发工作更加高效和便捷。
希望本文对你了解 SCSS 的基本语法有所帮助！如果有任何问题或建议，欢迎在评论区留言。