基础概念

Kpsmart2025年3月5日大约 5 分钟

SCSS/SASS基础概念

Sass/SCSS的定义与历史演进

Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器，最初由Hampton Catlin设计并由Natalie Weizenbaum开发。它于2006年首次发布，是最早的CSS预处理器之一，经过多年发展已成为最流行的CSS扩展语言。

发展历程

2006年: Hampton Catlin首次发布Sass，采用Ruby实现
2010年: Chris Eppstein加入开发团队，创建Compass框架
2014年: LibSass发布，提供C/C++实现，提高编译性能
2016年: Sass 3.4发布，引入父选择器扩展功能
2020年: Dart Sass成为主要实现，支持模块系统

快速上手

下面是一个简单的Sass示例，展示了变量、嵌套和混入的基本用法：

// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$border-radius: 4px;

// 定义混入
@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: white;
  border-radius: $border-radius;
  padding: 10px 15px;
  border: none;
  
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// 使用变量和混入
.primary-button {
  @include button-style($primary-color);
}

.secondary-button {
  @include button-style($secondary-color);
}

// 嵌套语法
nav {
  background: #333;
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        text-decoration: none;
        padding: 10px 15px;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

编译后的CSS：

.primary-button {
  background-color: #3498db;
  color: white;
  border-radius: 4px;
  padding: 10px 15px;
  border: none;
}
.primary-button:hover {
  background-color: #217dbb;
}

.secondary-button {
  background-color: #2ecc71;
  color: white;
  border-radius: 4px;
  padding: 10px 15px;
  border: none;
}
.secondary-button:hover {
  background-color: #25a25a;
}

nav {
  background: #333;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
}
nav ul li a:hover {
  text-decoration: underline;
}

.sass与.scss语法差异对比

Sass有两种语法格式：

原始语法(.sass文件)：使用缩进而非花括号和分号

nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block

SCSS语法(.scss文件)：使用与CSS相似的花括号和分号

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

语法特点对比

特性	.sass	.scss
分隔符	换行和缩进	花括号和分号
嵌套语法	基于缩进	基于花括号
CSS兼容性	需要转换	完全兼容
学习曲线	较陡	较平缓
代码风格	简洁	传统

预处理器核心价值

Sass/SCSS通过以下核心功能扩展了CSS的能力：

1. 变量系统

全局变量：定义和重用颜色、字体等值

$brand-color: #3498db;
$font-stack: 'Helvetica', sans-serif;

body {
  font-family: $font-stack;
  color: darken($brand-color, 20%);
}

作用域：支持局部和全局作用域

$color: black; // 全局变量

.container {
  $color: blue; // 局部变量
  color: $color; // 使用局部变量 blue
}

.footer {
  color: $color; // 使用全局变量 black
}

默认值：使用!default设置变量默认值

$primary-color: blue !default;
// 如果$primary-color已定义，则不会被覆盖

2. 模块化

文件拆分：将样式分割为多个文件，便于管理

导入机制：使用@use和@import组织代码

// _variables.scss
$primary-color: blue;

// main.scss
@use 'variables';
.button {
  background-color: variables.$primary-color;
}

命名空间：避免样式冲突

@use 'buttons' as b;
@use 'forms' as f;

.container {
  @include b.large-button;
  @include f.input-field;
}

3. 代码复用

混入(Mixins)：创建可重用的样式片段

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  @include flex-center;
  flex-direction: column;
}

继承(Extend)：共享公共样式

%button-base {
  padding: 10px 15px;
  border-radius: 4px;
  border: none;
}

.primary-button {
  @extend %button-base;
  background-color: blue;
}

.secondary-button {
  @extend %button-base;
  background-color: gray;
}

函数(Functions)：处理值的计算和转换

@function calculate-width($col-span, $total-cols: 12) {
  @return percentage($col-span / $total-cols);
}

.sidebar {
  width: calculate-width(3); // 25%
}

4. 逻辑控制

条件语句：使用@if/@else进行条件判断

$theme: 'dark';

.button {
  @if $theme == 'dark' {
    background-color: #333;
    color: white;
  } @else {
    background-color: #f8f9fa;
    color: #333;
  }
}

循环结构：使用@for/@each/@while生成重复样式

// @for循环
@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

// @each循环
$sizes: (small: 12px, medium: 16px, large: 24px);
@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}

Sass编译过程

Sass文件需要编译成标准CSS才能被浏览器识别。编译过程包括：

解析阶段：Sass编译器读取源文件，解析语法结构
处理阶段：执行变量替换、混入展开、函数计算等操作
生成阶段：输出标准CSS代码

编译方式

命令行编译
```
sass input.scss output.css
```
构建工具集成
- Webpack (sass-loader)
- Vite (内置支持)
- Gulp (gulp-sass)
实时编译
```
sass --watch input.scss:output.css
```

何时使用Sass

Sass适用于以下场景：

大型项目：需要组织大量CSS代码
主题化需求：需要支持多主题或动态主题切换
组件库开发：构建可复用的UI组件
团队协作：多人共同开发样式系统

不建议使用的场景：

简单的单页应用或小型网站
需要极致性能的场景（编译会增加构建时间）
团队对CSS预处理器不熟悉的情况

与其他预处理器的比较

1. Sass vs Less

Sass功能更丰富，但学习曲线较陡
Less语法更接近JavaScript，易于上手
Sass社区更大，生态更完善

2. Sass vs Stylus

Sass语法规范，Stylus更灵活
Sass文档和工具支持更完善
Stylus性能略优但使用较少

最佳实践建议

选择合适的语法
- 新项目推荐使用.scss语法
- 团队项目保持语法一致性
文件组织
- 按功能模块划分文件
- 使用统一的命名规范
- 合理使用分组
性能优化
- 避免过度嵌套（不超过4层）
- 合理使用混入和继承（混入适用于参数化样式，继承适用于无参数的样式共享）
- 注意选择器性能（避免生成过长的选择器链）
- 使用压缩模式编译生产环境代码
```
sass --style=compressed input.scss output.css
```

通过掌握这些基础概念，你将能更好地理解和使用SCSS/SASS的高级特性，编写出更加优雅和可维护的样式代码。