Sass 基础教程

Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。

文档: 前往 sass 官网

前置说明

介绍

Sass 是一种 Css 的扩展语言和预编译处理工具，提供了一种类似编程方式来编写样式代码。遵循 Sass 语法，用编程的方式去理解和书写样式，从而提高样式的开发效率和可维护性。

既然说了 Sass 是 Css 的扩展语言，那么一切合法的 Css 语言也就完全可以写在 Sass 文件中。类似 Typescript 是 Javascript 的超集一样。

编译sass

安装sass编译工具

$ npm install -g sass

编译sass文件

$ sass input.scss output.css [-w]

模块化

通过下划线开头的方式来命名 sass 文件（比如 _filename.scss），编译工具将不会把该模块文件编译输出为单独的 .css 文件。 引入该下划线命名的模块时，不需要开头的下划线。

引入示例代码如下：

_theme-color.scss

$primary-color: red;

index.scss

@use "theme-color";

.title {
  color: theme-color.$primary-color;
  margin: 5px;
}

错误定位

当 Sass 在样式表中遇到无效语法时，会解析失败，并向用户显示错误信息，其中包含无效语法的位置及其无效原因，便于用户更正问题。

注释

// 双斜线用于单行注释

/** css的注释也适用于sass */

自定义属性

自定义属性如果要用变量，注意使用插值语法来使用变量，否则会被原封不动编译到原位。

如果自定义属性中引用的变量值是需要带引号，则需要借助 meta.inspect() 函数辅助。

@use 'sass:meta';

$color: red;
$raleway: "Segoe UI", sans-serif;

:root {
  --primary-color: #{$color}; // success => 编译结果为 --primary-color: red;
  // --warning-color: $color; // error => 编译结果为 --primary-color: $color;

  --font-raleway: #{meta.inspect($raleway)}; // success => 编译结果： --font-raleway: "Segoe UI", sans-serif;
  // --font-raleway_: #{$raleway}; // error => 编译结果： --font-raleway: Segoe UI, sans-serif;
}

隐藏声明

有时你可能只想让某个属性声明在某些时候显示。如果声明的值为空 null 或未加引号的空字符串，Sass 就不将该声明编译成CSS 。其中 sass() 用来判断

index.scss

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if(sass($rounded-corners): 5px);
}

index.css

.button {
  border: 1px solid black;
}

规则

• & 是 sass 设计的一种特殊选择器，用于在嵌套选择器中引用外部选择器。

编译前的 index.scss

.alert {
  &:hover {
    font-weight: bold;
  }

  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  :not(&) {
    opacity: 0.8;
  }
}

编译后的 index.css

CSS输出
.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

• BEM 命名

科普

BEM（块元素修饰符）全称Block-Element-Modifier，是由Yandex团队提出的前端CSS命名方法论，旨在通过规范命名规则提升代码可维护性与团队协作效率。

其核心概念是将界面分解为独立块(Block)、块内元素(Element)及状态修饰符(Modifier)三个层级。命名规范采用.blockelement--modifier结构：块名作为独立组件基础，元素通过双下划线()与块名连接，修饰符通过双短横线(--)表示状态变化。该方法要求CSS类名仅由块、元素、修饰符三部分组成，避免多层嵌套选择器。

index.scss

.dialog {
  color: red;
  &__title {
    text-align: center;
  }
}

index.css

.dialog {
  color: red;
}
.dialog__title {
  text-align: center;
}