Dart Sass 学习指南

Dart Sass 是 Sass 的主要实现之一，它是用 Dart 语言编写的，并且具有许多现代化的功能和改进。本文将介绍 Dart Sass 的基本用法和一些高级特性。

安装 Dart Sass

你可以通过多种方式安装 Dart Sass，最常见的是通过 npm：

npm install -g sass

安装完成后，你可以使用 sass 命令来编译 Sass 文件：

sass source/stylesheets/index.scss build/stylesheets/index.css

基本语法

变量

Sass 允许你使用变量来存储值，这样可以在整个样式表中重复使用这些值：

$primary-color: #333;

body {
  color: $primary-color;
}

嵌套

Sass 允许你嵌套 CSS 规则，使你的样式表更具层次结构：

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合 (Mixins)

Mixins 允许你创建可重用的样式块，你可以在整个样式表中包含这些样式块：

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

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

继承

继承允许你在一个选择器中继承另一个选择器的样式：

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

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

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

现代特性

@use 和 @forward

从 Dart Sass 3.0.0 版本开始，逐步废弃了 @import 规则，转而推荐使用更现代的 @use 和 @forward 规则。

@use

@use 规则用于导入样式文件，并创建一个命名空间来包含其成员，避免全局命名冲突：

// utils/_colors.scss
$primary-color: blue;

// styles.scss
@use 'utils/colors';

body {
  color: colors.$primary-color;
}

@forward

@forward 规则用于转发样式文件的成员，使其可以被其他文件使用。一般用于创建第三方库和模块：

// utils/_colors.scss
$primary-color: blue;

// utils/_index.scss
@forward 'colors';

// styles.scss
@use 'utils/index' as utils;

body {
  color: utils.$primary-color;
}

参考资料

• Dart Sass 官方文档