Sass 入门教程 - htmlpage.cn

1. 什么是 Sass？

Sass 是一种 CSS 预处理器，它扩展了 CSS 的功能，允许使用变量、嵌套规则、混合器、函数等特性。它可以帮助开发者编写更加模块化、可维护的样式代码。

2. Sass 的安装

方法一：通过 Node.js 安装

npm install -g sass

方法二：使用 Ruby 安装

gem install sass

3. Sass 的基本语法

Sass 有两种语法格式：

.scss（推荐）：类似 CSS 的语法，使用花括号和分号
.sass：使用缩进和换行的语法

示例：SCSS 语法

// 定义变量
$primary-color: #3498db;
$padding-base: 10px;

.button {
  background-color: $primary-color;
  padding: $padding-base;

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

4. Sass 的核心特性

4.1 变量

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

body {
  font-family: $font-stack;
  color: $primary-color;
}

4.2 嵌套

nav {
  background-color: #f1f1f1;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: #333;
      }
    }
  }
}

4.3 混合器（Mixins）

// 定义混合器
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

4.4 继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
}

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

4.5 运算

$width: 100px;
$padding: 10px;

.container {
  width: $width + $padding * 2;  // 120px
}

5. Sass 的控制指令

5.1 条件语句

@mixin text-style($size) {
  @if $size == large {
    font-size: 20px;
  } @else if $size == medium {
    font-size: 16px;
  } @else {
    font-size: 12px;
  }
}

5.2 循环

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

// each 循环
$colors: red, green, blue;
@each $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

6. Sass 的函数

Sass 提供了许多内置函数：

$base-color: #ff0000;

.element {
  background-color: lighten($base-color, 10%);
  border-color: darken($base-color, 20%);
}

7. 模块化

7.1 导入其他 Sass 文件

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

// main.scss
@import 'variables';

body {
  background-color: $primary-color;
}

8. 编译 Sass 到 CSS

使用命令行编译：

# 单文件编译
sass input.scss output.css

# 监听文件变化并自动编译
sass --watch input.scss:output.css

9. 推荐的最佳实践

使用有意义的变量名
保持代码层次清晰
合理使用混合器和继承
避免过度嵌套
使用代码注释解释复杂的样式逻辑

10. 常见工具和集成

webpack：使用 sass-loader
gulp：gulp-sass 插件
VSCode 扩展：Live Sass Compiler

Sass 是一个强大的 CSS 预处理器，学习和掌握它可以极大地提高你的前端样式开发效率。通过变量、嵌套、混合器等特性，你可以编写更加简洁和可维护的 CSS 代码。

希望这篇教程能帮助你入门 Sass！

使用htmlpage，在线快速创建网页：https://htmlpage.cn/builder