SASS SCSS预处理(2026-03-27)

SASS/SCSS预处理完全指南

概述

SASS（Syntactically Awesome Style Sheets）是一种CSS预处理器，它为CSS添加了编程特性，如变量、嵌套、混合（mixin）、函数等。SCSS是SASS的第三代语法，完全兼容CSS3，是现代前端开发的必备工具。

SASS vs SCSS

SASS语法（缩进语法）

// 使用缩进代替花括号
$primary-color: #333

body
  color: $primary-color
  font-size: 16px
  
  h1
    color: #000
​

SCSS语法（花括号语法）

// 使用花括号，类似CSS
$primary-color: #333;

body {
  color: $primary-color;
  font-size: 16px;
  
  h1 {
    color: #000;
  }
}
​

变量

定义和使用

// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;
$font-family-base: 'Helvetica', 'Arial', sans-serif;

// 使用变量
body {
  color: $primary-color;
  font-size: $font-size-base;
  font-family: $font-family-base;
}

.button {
  background-color: $primary-color;
  color: white;
  
  &:hover {
    background-color: $secondary-color;
  }
}
​

变量作用域

// 全局变量
$global-color: blue;

.container {
  // 局部变量
  $local-color: red;
  color: $local-color;
}

// 使用!global创建全局变量
.button {
  $btn-color: green !global;
}

// 默认变量
$base-color: red;
$base-color: blue !default;  // 只有在未定义时才赋值

// 使用默认值
.theme {
  color: $base-color;  // blue
}
​

变量插值

$side: top;
$border-width: 2px;

.border {
  border-#{$side}: $border-width solid #ddd;
}

// 类名插值
$prefix: 'btn';
.#{$prefix}-primary {
  background-color: blue;
}

// URL插值
$image-path: '/images';
.logo {
  background: url('#{$image-path}/logo.png');
}
​

嵌套

基本嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
​

父选择器引用

a {
  color: blue;
  
  &:hover {
    color: red;
  }
  
  &:visited {
    color: purple;
  }
  
  &:active {
    color: green;
  }
}

// 组合使用
.button {
  &.primary {
    background-color: blue;
  }
  
  &.secondary {
    background-color: gray;
  }
}

// 嵌套属性
.text {
  font: {
    family: 'Arial', sans-serif;
    size: 16px;
    weight: bold;
  }
}
​

混合（Mixin）

定义和使用

// 定义mixin
@mixin button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// 使用mixin
.btn-primary {
  @include button;
  background-color: blue;
  color: white;
}
​

带参数的Mixin

// 带参数
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

// 多个参数
@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0, 2px, 4px, rgba(0, 0, 0, 0.1));
}
​

默认参数

@mixin transition($property: all, $duration: 0.3s, $easing: ease) {
  -webkit-transition: $property $duration $easing;
  transition: $property $duration $easing;
}

.button {
  @include transition;  // 使用默认值
}

.link {
  @include transition(color, 0.2s);  // 部分覆盖
}
​

可变参数

@mixin box-shadow($shadows...) {
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.card {
  @include box-shadow(
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1)
  );
}
​

条件Mixin

@mixin theme-color($color) {
  @if lightness($color) > 50% {
    background-color: #000;
    color: $color;
  } @else {
    background-color: #fff;
    color: $color;
  }
}

.light-theme {
  @include theme-color(#999);
}

.dark-theme {
  @include theme-color(#333);
}
​

函数

内置函数

// 颜色函数
$primary-color: #3498db;

.color-primary {
  background-color: $primary-color;
  
  // 变亮/变暗
  &:hover {
    background-color: darken($primary-color, 10%);
  }
  
  &:active {
    background-color: lighten($primary-color, 10%);
  }
  
  // 调整透明度
  &.transparent {
    background-color: rgba($primary-color, 0.5);
    background-color: transparentize($primary-color, 0.5);
  }
}

// 数学函数
$width: 100%;
$columns: 4;

.column {
  width: $width / $columns;  // 25%
}

// 字符串函数
$icon: 'home';

.icon-#{$icon} {
  background-image: url('/images/#{$icon}.png');
}
​

自定义函数

// 计算em值
@function em($pixels, $base: 16px) {
  @return ($pixels / $base) * 1em;
}

.text {
  font-size: em(18px);  // 1.125em
}

// 颜色对比度
@function text-color($bg-color) {
  @if lightness($bg-color) > 50% {
    @return #000;
  } @else {
    @return #fff;
  }
}

.button {
  background-color: #3498db;
  color: text-color(#3498db);
}
​

继承

基本继承

.message {
  padding: 10px;
  border-radius: 4px;
  font-weight: bold;
}

.success {
  @extend .message;
  background-color: #2ecc71;
  color: white;
}

.error {
  @extend .message;
  background-color: #e74c3c;
  color: white;
}
​

链式继承

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.button-large {
  @extend .button-primary;
  padding: 15px 30px;
  font-size: 18px;
}
​

占位符选择器

// 使用%定义占位符
%message-base {
  padding: 10px;
  border-radius: 4px;
}

.success {
  @extend %message-base;
  background-color: green;
}

.error {
  @extend %message-base;
  background-color: red;
}
​

运算

数学运算

// 加减乘除
$width: 100%;

.container {
  width: $width - 20px;
  height: 100px + 50px;
  font-size: 16px * 1.5;
  margin: 20px / 2;
}

// 单位运算
$px: 10px;
$em: 1em;

.value {
  width: $px * 2;      // 20px
  height: $em * 1.5;   // 1.5em
}
​

颜色运算

// 颜色运算
$color: #010203;

.mixed {
  color: $color + #050505;  // #060708
}

// Alpha通道
$rgba: rgba(255, 0, 0, 0.5);

.opacity {
  color: opacify($rgba, 0.3);      // rgba(255, 0, 0, 0.8)
  background: transparentize($rgba, 0.2);  // rgba(255, 0, 0, 0.3)
}
​

条件和循环

条件语句

$theme: 'dark';

@if $theme == 'dark' {
  body {
    background-color: #333;
    color: #fff;
  }
} @else if $theme == 'light' {
  body {
    background-color: #fff;
    color: #333;
  }
} @else {
  body {
    background-color: gray;
    color: black;
  }
}
​

循环

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

// each循环
$sizes: (small, medium, large);

@each $size in $sizes {
  .#{$size} {
    @if $size == small {
      font-size: 12px;
    } @else if $size == medium {
      font-size: 16px;
    } @else if $size == large {
      font-size: 20px;
    }
  }
}

// each循环（map）
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

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

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

模块化

Partials和@import

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _mixins.scss
@mixin button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

// _buttons.scss
@import 'variables';
@import 'mixins';

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

// main.scss
@import 'variables';
@import 'mixins';
@import 'buttons';
​

@use和@forward（推荐）

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _mixins.scss
@mixin button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

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

.button {
  @include button;
  background-color: $primary-color;
}
​

实用工具

响应式设计

// 断点变量
$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px,
  xlarge: 1200px
);

// Mixin
@mixin breakpoint($size) {
  @if map-has-key($breakpoints, $size) {
    @media (min-width: map-get($breakpoints, $size)) {
      @content;
    }
  }
}

// 使用
.container {
  width: 100%;
  
  @include breakpoint(medium) {
    width: 750px;
  }
  
  @include breakpoint(large) {
    width: 970px;
  }
}
​

网格系统

$columns: 12;
$gutter: 20px;

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $gutter / 2;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 (-$gutter / 2);
}

@for $i from 1 through $columns {
  .col-#{$i} {
    flex: 0 0 percentage($i / $columns);
    padding: 0 $gutter / 2;
  }
}
​

主题系统

// 定义主题
$themes: (
  light: (
    background: #ffffff,
    text: #333333,
    primary: #3498db
  ),
  dark: (
    background: #333333,
    text: #ffffff,
    primary: #2ecc71
  )
);

// Mixin
@mixin themify($themes: $themes) {
  @each $theme, $colors in $themes {
    .theme-#{$theme} & {
      $current-theme: () !global;
      @each $key, $color in $colors {
        $current-theme: map-merge($current-theme, ($key: $color)) !global;
      }
      @content;
      $current-theme: null !global;
    }
  }
}

// 使用
.button {
  @include themify($themes) {
    background-color: map-get($current-theme, primary);
    color: map-get($current-theme, text);
  }
}
​

最佳实践

1. 命名规范

// BEM命名法
.block { }
.block__element { }
.block--modifier { }

// 示例
.card { }
.card__header { }
.card__body { }
.card--featured { }
​

2. 组织结构

styles/
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _variables.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _forms.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
└── main.scss
​

3. 避免深层嵌套

// 避免
nav {
  ul {
    li {
      a {
        span {
          color: blue;
        }
      }
    }
  }
}

// 推荐
nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}
​

4. 使用模块化

// 使用@use代替@import
@use 'variables';
@use 'mixins';
​

总结

SASS/SCSS为CSS添加了强大的编程特性，大大提高了样式开发的效率和可维护性。掌握变量、嵌套、Mixin、函数和模块化，可以构建灵活、可维护的样式系统。结合现代前端工具链和最佳实践，SASS/SCSS是提升前端开发效率的重要工具。