SCSS使用教程.md 5.5 KB
SCSS vs 传统 CSS 功能对比
快速对比
| 功能 | 传统 CSS | SCSS |
|---|---|---|
| 语法 | 标准 CSS 语法 | ✅ 完全兼容 CSS 语法 |
| 变量 | ❌ 不支持（CSS 变量有限） | ✅ $variable |
| 嵌套 | ❌ 不支持 | ✅ 支持嵌套 |
| Mixin | ❌ 不支持 | ✅ @mixin / @include |
| 继承 | ❌ 不支持 | ✅ @extend |
| 函数 | ❌ 不支持 | ✅ 内置函数 + 自定义函数 |
| 条件语句 | ❌ 不支持 | ✅ @if / @else |
| 循环 | ❌ 不支持 | ✅ @for / @each / @while |
| 导入 | ✅ @import |
✅ @use / @import |
| 模块化 | ⚠️ 有限 | ✅ 完整的模块系统 |
1. 变量 (Variables)
传统 CSS
/* 需要重复写值 */
.header {
color: #0769fb;
}
.button {
color: #0769fb; /* 重复 */
}
SCSS
$primary-color: #0769fb;
.header {
color: $primary-color;
}
.button {
color: $primary-color; // 使用变量
}
2. 嵌套 (Nesting)
传统 CSS
.nav {
background: #fff;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
}
.nav ul li a {
color: #000;
}
SCSS
.nav {
background: #fff;
ul {
list-style: none;
li {
display: inline;
a {
color: #000;
}
}
}
}
3. Mixin（混入）
传统 CSS
/* 需要重复写相同的代码 */
.button {
display: flex;
align-items: center;
justify-content: center;
}
.card {
display: flex;
align-items: center;
justify-content: center; /* 重复 */
}
SCSS
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.button {
@include flex-center;
}
.card {
@include flex-center; // 复用
}
带参数的 Mixin：
@mixin button($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
padding: 10px 20px;
}
.primary-button {
@include button(#0769fb, #fff);
}
4. 继承 (Extend)
传统 CSS
/* 需要重复写 */
.error {
border: 1px solid red;
color: red;
}
.serious-error {
border: 1px solid red; /* 重复 */
color: red; /* 重复 */
font-weight: bold;
}
SCSS
.error {
border: 1px solid red;
color: red;
}
.serious-error {
@extend .error; // 继承所有样式
font-weight: bold;
}
5. 函数 (Functions)
传统 CSS
/* 无法计算 */
.box {
width: 100%; /* 无法动态计算 */
}
SCSS
// 内置函数
.box {
width: percentage(2/3); // 66.66667%
background: darken(#0769fb, 10%); // 颜色变暗
padding: round(3.7px); // 4px
}
// 自定义函数
@function double($value) {
@return $value * 2;
}
.container {
width: double(50px); // 100px
}
6. 条件语句 (Conditionals)
传统 CSS
/* 不支持条件 */
SCSS
$theme: 'dark';
.button {
@if $theme == 'dark' {
background-color: #000;
color: #fff;
} @else {
background-color: #fff;
color: #000;
}
}
7. 循环 (Loops)
传统 CSS
/* 需要手动写 */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
/* ... 重复写 12 次 */
SCSS
// @for 循环
@for $i from 1 through 12 {
.col-#{$i} {
width: percentage($i / 12);
}
}
// @each 循环
$colors: red, blue, green;
@each $color in $colors {
.bg-#{$color} {
background-color: $color;
}
}
8. 模块化 (Modularity)
传统 CSS
/* 所有样式在一个文件，难以管理 */
SCSS
// _variables.scss (变量文件)
$primary-color: #0769fb;
// _mixins.scss (混入文件)
@mixin flex-center { ... }
// main.scss (主文件)
@use 'variables' as *;
@use 'mixins' as *;
.button {
color: $primary-color;
@include flex-center;
}
9. 运算 (Operations)
传统 CSS
/* 无法计算 */
.container {
width: 100%; /* 无法做数学运算 */
}
SCSS
$base-size: 16px;
$spacing: 20px;
.container {
width: 100% - $spacing; // 计算
font-size: $base-size * 1.5; // 24px
padding: $spacing / 2; // 10px
}
10. 父选择器引用 (&)
传统 CSS
.button {
color: blue;
}
.button:hover {
color: red; /* 需要重复写选择器 */
}
SCSS
.button {
color: blue;
&:hover {
color: red; // & 代表父选择器
}
&.active {
background: yellow;
}
}
实际项目示例
传统 CSS（44 行）
.device-container {
width: 100%;
height: 100%;
background-color: #0769fb;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.device-update {
width: 100%;
height: 100%;
background-color: #0769fb;
display: flex;
align-items: center;
justify-content: center;
}
/* ... 重复代码 ... */
SCSS（更简洁，使用变量和 mixin）
@use '../../styles/variables' as *;
.device-container {
width: $full-size;
height: $full-size;
background-color: $primary-color;
@include flex-center;
margin: 0;
padding: 0;
}
.device-update {
@extend .device-container; // 继承所有样式
}
总结
SCSS 的优势：
- ✅ 语法完全兼容 CSS（可以直接写 CSS）
- ✅ 变量：避免重复值
- ✅ 嵌套：结构更清晰
- ✅ Mixin：代码复用
- ✅ 函数：动态计算
- ✅ 逻辑：条件、循环
- ✅ 模块化：更好的组织
传统 CSS：
- ✅ 浏览器原生支持
- ✅ 无需编译
- ❌ 功能有限
- ❌ 代码重复多
- ❌ 难以维护大型项目
推荐： 使用 SCSS 编写，编译为 CSS 使用。