Sass介绍（CSS预处理器，为CSS提供了编程能力，是目前最流行的CSS扩展语言之一）（Syntactically Awesome Style Sheets）SaaS

Dontla

已于 2025-03-21 16:57:38 修改

阅读量845

点赞数 7

分类专栏：前端 css 文章标签： css sass 前端

于 2025-03-20 14:45:56 首次发布

本文链接：https://blog.csdn.net/Dontla/article/details/146396006

版权

前端同时被 2 个专栏收录

49 篇文章

订阅专栏

css

14 篇文章

订阅专栏

文章目录

Sass 全面解析
注意更SaaS区别，不要弄混了！

Sass 全面解析

1. Sass 基础概念

Sass (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器，为 CSS 提供了编程能力。2007年由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发，目前已成为最流行的 CSS 扩展语言之一。

1.1 与原生 CSS 的区别

Sass 解决了 CSS 中的多个痛点：

- 代码重用性差

- 缺乏变量支持

- 选择器冗余

- 缺少逻辑控制和计算能力

1.2 文件格式

Sass 支持两种语法格式：

// SCSS 语法 (.scss)
$primary-color: #3498db;

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

// 缩进语法 (.sass)
$primary-color: #3498db

.button
  background-color: $primary-color
  &:hover
    background-color: darken($primary-color, 10%)

2. 核心特性

2.1 变量

变量是 Sass 最基本的特性，允许存储和重用值。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2.2 嵌套规则

嵌套规则让 CSS 选择器的层次结构更加清晰。

nav {
  background: #333;
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    
    &:hover {
      color: #fff;
    }
  }
}

2.3 部分文件与模块化

Sass 允许将样式分割成多个文件，然后通过 @import 或更现代的 @use 导入。

// _variables.scss（局部文件）
$primary-color: #3498db;
$secondary-color: #2ecc71;

// main.scss
@import 'variables';
// 或使用更现代的方式
@use 'variables';

.button {
  background-color: $primary-color;
}

2.4 混合器 (Mixins)

混合器允许定义可复用的样式块。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

2.5 继承/扩展

通过 @extend 实现样式继承，减少代码重复。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

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

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

2.6 运算符与函数

Sass 提供了数学运算与内置函数。

.container {
  width: 100%;
}

article[role="main"] {
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  width: 300px / 960px * 100%;
  margin-left: 20px / 960px * 100%;
  background-color: darken(#3498db, 20%);
}

3. 高级特性

3.1 条件语句

通过 @if, @else if, @else 实现条件逻辑。

@mixin text-color($brightness) {
  @if $brightness > 50 {
    color: #000;
  } @else {
    color: #fff;
  }
}

.button-dark {
  background-color: #333;
  @include text-color(20);
}

.button-light {
  background-color: #eee;
  @include text-color(80);
}

3.2 循环

Sass 支持多种循环结构。

// for 循环
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

// each 循环
$colors: (header: #b06, main: #c38, footer: #913);

@each $area, $color in $colors {
  .#{$area} {
    background-color: $color;
  }
}

// while 循环
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

3.3 自定义函数

创建可重用的函数进行值计算。

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

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

.main-content {
  width: calculate-width(9);  // 75%
}

4. 实际应用场景

4.1 响应式设计

$breakpoints: (
  'small': 320px,
  'medium': 768px,
  'large': 1024px
);

@mixin respond-to($breakpoint) {
  $value: map-get($breakpoints, $breakpoint);
  
  @if $value != null {
    @media (min-width: $value) {
      @content;
    }
  } @else {
    @warn "未找到断点: `#{$breakpoint}`。请确保该断点定义在 `$breakpoints` 中。";
  }
}

.container {
  width: 100%;
  
  @include respond-to('medium') {
    width: 90%;
    max-width: 720px;
  }
  
  @include respond-to('large') {
    max-width: 960px;
  }
}

4.2 主题系统

// _themes.scss
$themes: (
  'light': (
    'bg-color': #fff,
    'text-color': #333,
    'link-color': #0066cc,
  ),
  'dark': (
    'bg-color': #222,
    'text-color': #eee,
    'link-color': #66aaff,
  )
);

@mixin themed() {
  @each $theme-name, $theme-map in $themes {
    .theme-#{$theme-name} & {
      $theme-map: $theme-map !global;
      @content;
      $theme-map: null !global;
    }
  }
}

@function theme-value($key) {
  @return map-get($theme-map, $key);
}

// 使用主题
body {
  @include themed() {
    background-color: theme-value('bg-color');
    color: theme-value('text-color');
  }
}

a {
  @include themed() {
    color: theme-value('link-color');
  }
}

5. Sass 与现代前端工作流

5.1 与构建工具集成

Sass 可以与现代前端构建工具无缝集成：

- Webpack 通过 sass-loader

- Vite 内置 Sass 支持

- Gulp 通过 gulp-sass

- Node.js 通过 node-sass 或 sass（推荐）

5.2 与 CSS Modules 结合

// Button.module.scss
.button {
  padding: 8px 16px;
  border-radius: 4px;
  
  &.primary {
    background-color: #0066cc;
    color: white;
  }
  
  &.secondary {
    background-color: #f5f5f5;
    color: #333;
  }
}

6. 最佳实践

6.1 文件组织

styles/
|-- abstracts/
|   |-- _variables.scss
|   |-- _mixins.scss
|   |-- _functions.scss
|-- base/
|   |-- _reset.scss
|   |-- _typography.scss
|-- components/
|   |-- _buttons.scss
|   |-- _forms.scss
|-- layout/
|   |-- _header.scss
|   |-- _footer.scss
|-- pages/
|   |-- _home.scss
|-- main.scss