scss是Sass预处理器的一个语法分支，属于CSS预处理器的一种，它在原生CSS的基础上增加了变量、嵌套、混合、继承等编程特性，让样式代码的编写更灵活、更易维护。scss文件的后缀名是.scss，最终需要编译成原生CSS文件才能在浏览器中生效。
scss的核心特性
1. 变量
scss支持定义变量来存储常用的样式值，比如颜色、字体大小、间距等，后续需要修改时只需要修改变量的值，所有引用该变量的地方都会同步更新，大幅减少重复修改的工作量。
变量以美元符号$开头，定义方式如下：
// 定义主题色变量
$primary_color: #1890ff;
// 定义字体大小变量
$font_size_base: 14px;
// 使用变量
.header {
background-color: $primary_color;
font-size: $font_size_base;
}
2. 嵌套语法
scss允许选择器的嵌套编写，和HTML的层级结构对应，减少重复书写父选择器的麻烦，让代码结构更清晰。
// 原生CSS需要重复写父选择器
.nav { padding: 10px; }
.nav .nav-item { margin-right: 15px; }
.nav .nav-item a { color: #333; }
// scss嵌套写法
.nav {
padding: 10px;
.nav-item {
margin-right: 15px;
a {
color: #333;
}
}
}
3. 混合宏（Mixin）
混合宏可以定义可复用的样式块，支持传入参数，适合处理需要重复使用的复杂样式逻辑，比如清除浮动、弹性布局等。
// 定义无参数混合宏
@mixin clear-float {
&::after {
content: '';
display: block;
clear: both;
}
}
// 定义带参数混合宏
@mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
justify-content: center;
align-items: center;
}
// 使用混合宏
.card {
@include clear-float;
}
.modal {
@include flex-center(column);
}
4. 继承
scss的继承可以让一个选择器复用另一个选择器的所有样式，减少代码冗余，通过@extend指令实现。
// 基础按钮样式
.btn-base {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
}
// 主要按钮继承基础样式
.btn-primary {
@extend .btn-base;
background-color: $primary_color;
color: #fff;
}
// 次要按钮继承基础样式
.btn-secondary {
@extend .btn-base;
background-color: #f0f0f0;
color: #666;
}
5. 运算和函数
scss支持在样式中进行数值运算，也内置了很多实用的函数，比如颜色处理、字符串处理、数学计算等。
// 数值运算
.container {
width: 100% - 20px;
padding: 10px * 2;
}
// 使用内置颜色函数
$light_primary: lighten($primary_color, 20%);
.footer {
background-color: $light_primary;
}
scss的使用场景
- 大型前端项目中，样式代码量较大，需要统一管理主题色、间距等公共样式值，使用scss变量可以快速全局调整样式。
- 组件化开发中，每个组件的样式有独立的层级结构，嵌套语法可以让样式结构和组件结构对应，更易维护。
- 需要复用复杂样式逻辑的场景，比如多端适配的弹性布局、统一的动画效果，通过混合宏可以减少重复代码。
- 需要基于现有样式做扩展的场景，比如基础组件样式和不同状态的组件样式，继承特性可以快速实现样式复用。
scss和原生CSS的区别
原生CSS不支持变量、嵌套、混合等编程特性，样式修改需要逐个查找替换，代码冗余度高。而scss作为预处理器，需要先编译成原生CSS才能运行，但是编写阶段效率更高，可维护性更强。目前主流的前端构建工具都支持scss的自动编译，使用门槛已经很低。
简单的scss编译示例
如果是本地开发，可以通过npm安装sass包来编译scss文件，命令如下：
# 安装sass npm install sass -D # 编译单个scss文件为css sass input.scss output.css # 监听scss文件变化自动编译 sass --watch input.scss:output.css
如果是使用Vue、React等框架开发，只需要在项目中安装对应的sass依赖，就可以直接在组件样式中使用scss语法，框架会自动完成编译工作。