SASS简介及使用方法，让你明明白白！

最新推荐文章于 2026-06-14 15:46:08 发布

原创最新推荐文章于 2026-06-14 15:46:08 发布 · 651 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#sass

本文介绍了SASS，一种扩展CSS的编程语言，涵盖了安装、基本语法（变量、嵌套、混入和导入）、以及如何编译SASS文件。重点强调了SASS如何提升样式表的灵活性和可维护性。

1. SASS概述

SASS（Syntactically Awesome Stylesheets）是一种CSS的扩展语言，它在CSS的基础上引入了变量、嵌套规则、混入、导入等功能，使得样式表更加灵活、易于维护。SASS通过使用一种类似于Ruby的语法，提供了更丰富的样式表编写方式。

2. 安装SASS

在开始使用SASS之前，首先需要安装SASS。SASS的安装通常通过Ruby的Gem包管理器进行，以下是安装步骤：

# 安装SASS 
gem install sass

安装完成后，你可以在终端中运行sass -v来验证SASS是否成功安装。

3. SASS基本语法

3.1 变量

SASS允许你使用变量来存储颜色、字体、边距等信息，以便在整个样式表中重复使用。

$primary-color: #3498db;
body {
  background-color: $primary-color;
}

3.2 嵌套规则

通过SASS，你可以使用嵌套的方式来组织样式规则，使得样式表更加清晰。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;

    &:hover {
      border-bottom: 1px solid #ccc;
    }
  }
}

3.3 混入（Mixin）

混入是一种可复用的样式块，可以在不同的选择器中引入。

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

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

3.4 导入

SASS允许将样式拆分为多个文件，并通过@import语句引入。

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

// main.scss
@import 'variables';

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

4. 编译SASS

完成SASS文件的编写后，需要将其编译为纯CSS文件。可以通过以下命令进行编译：

sass input.scss output.css

如果你希望持续监视SASS文件的变化并自动编译，可以使用--watch选项：

sass --watch input.scss:output.css

5. 总结

SASS为CSS提供了更强大的功能和更灵活的编写方式，使得样式表的管理变得更加便捷。通过变量、嵌套规则、混入等特性，SASS提高了样式表的可维护性和可读性。在使用SASS时，确保正确安装并了解基本语法，以充分发挥其优势。