深入浅出 Sass 教程及学习笔记

2023-09-04 04:55:31

Sass 的强大功能

Sass 作为 CSS 的扩展，提供了许多 CSS 不支持的功能，使其更具灵活性与强大性，包括：

变量：Sass 中可以定义变量，并将其用于样式表中，以便随时更新或重用。
嵌套：Sass 允许嵌套选择器，以便更轻松地组织和维护样式表。
混合：Sass 中的混合功能允许将一组样式声明打包成一个可重用的单元，以提高样式表的可重用性和可维护性。
函数：Sass 中提供了许多内置函数，用于执行各种操作，如数学运算、字符串操作等，可以简化样式表的编写。
运算符：Sass 支持各种运算符，如加、减、乘、除等，可以在样式表中进行计算，以提高样式表的灵活性。

Sass 的基本语法

Sass 的基本语法与 CSS 非常相似，但也有许多不同之处。其中最显著的区别是 Sass 使用缩进而不是花括号来组织样式表。以下是一些 Sass 的基本语法示例：

// 变量
$primary-color: #ff0000;

// 嵌套
div {
  width: 100px;
  height: 100px;
  background-color: $primary-color;
}

// 混合
@mixin button {
  width: 100px;
  height: 50px;
  background-color: $primary-color;
  border: 1px solid #000;
}

// 函数
@function darken($color, $amount) {
  @return mix($color, black, $amount);
}

Sass 的高级用法

除了基本语法之外，Sass 还提供了许多高级用法，如选择器、指令等。选择器用于指定样式表要应用到的 HTML 元素，指令用于控制样式表的编译行为。以下是一些 Sass 的高级用法示例：

// 选择器
div:hover {
  background-color: #00ff00;
}

// 指令
@import "reset.scss";
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}