CSS 预处理器:Sass的基本用法、核心特性

关于 Sass(Syntactically Awesome Style Sheets) 的详细介绍,包括其基本用法、核心特性、语法差异(.scss vs .sass),以及多个经典实用示例。



🔍 一、什么是 Sass?

Sass 是一种 CSS 预处理器(CSS Preprocessor),它扩展了 CSS 的功能,允许你使用变量、嵌套、混合(mixin)、函数、条件、循环等"编程式"语法来编写样式,最终编译为标准的 CSS 文件供浏览器使用。

✅ 主要优势:

  • 减少重复代码
  • 提高可维护性
  • 支持模块化开发
  • 更强的逻辑控制能力(条件、循环)
  • 更好的团队协作与主题定制

🧩 二、Sass 两种语法格式

Sass 支持两种语法,功能相同,只是写法不同:

格式 文件扩展名 特点
SCSS(Sassy CSS) .scss 类似 CSS 语法,使用 {};,推荐使用
Sass(缩进语法) .sass 缩进代替括号,无分号,类似 Python

推荐使用 .scss,因为它与 CSS 完全兼容,学习成本低。


🧱 三、Sass 核心特性与用法

1. 变量(Variables)

使用 $ 定义变量,用于存储颜色、字体、尺寸等,便于统一管理。

scss 复制代码
// 定义变量
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;
$border-radius: 4px;

// 使用变量
.button {
  background-color: $primary-color;
  font-family: $font-stack;
  border-radius: $border-radius;
}

编译后:

css 复制代码
.button {
  background-color: #007bff;
  font-family: 'Helvetica Neue', sans-serif;
  border-radius: 4px;
}

2. 嵌套(Nesting)

允许在父选择器中嵌套子元素,结构更清晰。

scss 复制代码
.navbar {
  background: #333;
  padding: 1rem;

  .nav-link {
    color: white;
    text-decoration: none;

    &:hover {
      color: $primary-color;
    }
  }

  .logo {
    font-weight: bold;
  }
}

编译后:

css 复制代码
.navbar {
  background: #333;
  padding: 1rem;
}
.navbar .nav-link {
  color: white;
  text-decoration: none;
}
.navbar .nav-link:hover {
  color: #007bff;
}
.navbar .logo {
  font-weight: bold;
}

💡 & 表示父选择器,常用于 :hover, :focus, 伪类等。


3. 混合(Mixins)

类似"函数",可定义可复用的样式块,支持参数和默认值。

scss 复制代码
// 定义一个带阴影的 mixin
@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0,0,0,0.1)) {
  box-shadow: $x $y $blur $color;
}

// 使用 mixin
.card {
  @include box-shadow(0, 4px, 8px, rgba(0,0,0,0.15));
}

.button {
  @include box-shadow();
}

编译后:

css 复制代码
.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

4. 继承(Extend)

让一个选择器继承另一个的样式,减少重复。

scss 复制代码
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

编译后:

css 复制代码
.success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}

💡 %placeholder 是占位符选择器,不会输出到 CSS,仅用于继承。


5. 函数(Functions)

Sass 内置大量函数(如 lighten(), darken(), rgba()),也可自定义函数。

scss 复制代码
$base-color: #007bff;

.button-primary {
  background-color: $base-color;
  border-color: darken($base-color, 10%);
  color: lighten($base-color, 40%);
}

编译后:

css 复制代码
.button-primary {
  background-color: #007bff;
  border-color: #005ecc;
  color: #b3d9ff;
}

6. 条件与循环(@if / @for / @each / @while)

Sass 支持编程逻辑,适合生成复杂样式。

示例:使用 @each 生成按钮主题
scss 复制代码
$themes: (
  primary: #007bff,
  success: #28a745,
  danger:  #dc3545,
  warning: #ffc107
);

@each $name, $color in $themes {
  .btn-#{$name} {
    background-color: $color;
    border-color: darken($color, 10%);

    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

编译后(部分):

css 复制代码
.btn-primary {
  background-color: #007bff;
  border-color: #005ecc;
}
.btn-primary:hover {
  background-color: #005ecc;
}
/* ... 其他主题 */
示例:使用 @for 生成栅格类
scss 复制代码
@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

编译后:

css 复制代码
.col-1 { width: 8.333%; }
.col-2 { width: 16.667%; }
/* ... */
.col-12 { width: 100%; }

📁 四、模块化与文件组织(@use / @import)

推荐使用 @use(Sass 1.23+ 推荐)

scss 复制代码
// _variables.scss
$primary: #007bff;
$spacing: 1rem;

// _mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// main.scss
@use 'variables' as vars;
@use 'mixins';

.card {
  margin: vars.$spacing;
  @include mixins.center;
}

💡 _ 开头的文件是"部分文件"(partial),不会单独编译。


⚙️ 五、如何使用 Sass?

1. 安装 Sass

bash 复制代码
npm install -g sass

2. 编译 SCSS 到 CSS

bash 复制代码
sass input.scss output.css

3. 开启监听模式(开发时)

bash 复制代码
sass --watch input.scss output.css

4. 在项目中使用(如 Webpack/Vite)

  • 使用 sass-loader(Webpack)
  • 或直接在 Vue/React 项目中引入 .scss 文件

🎯 六、经典实用示例

✅ 示例 1:响应式断点混合(Responsive Mixins)

scss 复制代码
// _mixins.scss
@mixin mobile {
  @media (max-width: 768px) { @content; }
}

@mixin tablet {
  @media (min-width: 769px) and (max-width: 1024px) { @content; }
}

@mixin desktop {
  @media (min-width: 1025px) { @content; }
}

// 使用
.container {
  padding: 2rem;

  @include mobile {
    padding: 1rem;
  }

  @include desktop {
    max-width: 1200px;
    margin: 0 auto;
  }
}

✅ 示例 2:创建主题切换(CSS 变量 + Sass)

scss 复制代码
:root {
  --primary-color: #{$primary};
  --text-color: #333;
}

[data-theme="dark"] {
  --primary-color: #{darken($primary, 20%)};
  --text-color: #eee;
}

.theme-toggle {
  background: var(--primary-color);
  color: white;
}

✅ 示例 3:生成图标类(@each)

scss 复制代码
$icons: (
  home: "\e900",
  user: "\e901",
  settings: "\e902"
);

@each $name, $code in $icons {
  .icon-#{$name}:before {
    content: $code;
    font-family: 'IconFont';
  }
}

✅ 总结:Sass 的核心价值

特性 用途
$变量 统一管理颜色、字体、间距
@mixin 封装可复用样式(阴影、动画)
@include 调用 mixin
@extend 继承样式,减少冗余
嵌套 提高结构可读性
@each/@for 批量生成类(栅格、主题)
@use 模块化组织样式文件

📚 推荐学习资源


💡 一句话总结
Sass = CSS + 变量 + 函数 + 逻辑 + 模块化,是现代前端开发不可或缺的样式编程工具。

相关推荐
向上的车轮15 小时前
Sass 与 Bootstrap 5的区别是什么?
bootstrap·sass
清灵xmf1 天前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
面向星辰2 天前
css选择器(继承补充)
前端·css
敲代码的嘎仔2 天前
JavaWeb零基础学习Day1——HTML&CSS
java·开发语言·前端·css·学习·html·学习方法
Tachyon.xue2 天前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
β添砖java2 天前
CSS网格布局
前端·css·html
wyzqhhhh3 天前
less和sass
前端·less·sass
EveryPossible3 天前
带有渐变光晕
前端·javascript·css
qianmo20213 天前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3