SASS - 具有超能力的 CSS

简介

Sass（语法上很棒的样式表）是一种 CSS 扩展语言，它允许您使用诸如变量、嵌套规则、内联导入等内容。它有助于使事情井井有条，并允许您更快地编写 CSS。

步骤

• 安装 SASS
• 编写 SASS 文件，但您需要将其转换为 CSS 文件，因为浏览器无法读取 SASS
• 转换有很多方法
  • 使用命令sass --watch input.scss output.css。这里 input.scss 是 sass 文件， output.css 是 css 文件。--watch（监视标志）告诉 Sass 监视源文件的更改，并在每次保存 Sass 时重新编译 CSS
  • 我们也可以使用sass --watch app/sass:public/stylesheets命令。这里输入目录和输出目录用 : 分隔。Sass 会监视 app/sass 文件夹中的所有文件的更改，并将 CSS 编译到 public/stylesheets 文件夹
  • 如果您使用 VS Code 作为代码编辑器。您可以使用Live Sass Compiler 现在，当您使用 .scss 创建文件时，您将在左下方看到Watch SASS。单击它，您的 Sass 将被转换为 css 并保存在同一文件夹中

语法

SASS 允许两种语法：

SCSS(Sassy CSS)

1.类似于 CSS（使用花括号和分号）
2.CSS也是有效的
3..scss 扩展名

Sass（语法很棒的样式表）

1.使用缩进
2.CSS 代码无效
3..sass 扩展名

变量

您可以存储诸如颜色、字体堆栈或任何您认为要重用的 CSS 值之类的内容。Sass 使用 $ 符号使某些东西成为变量。

当 Sass 转换为 CSS 时，变量不会被转换，而是直接存储属性。

Map

Sass 中的映射保存键和值对，并且可以很容易地通过对应的键查找值。

嵌套

Sass 可以让你嵌套 CSS 选择器，以遵循 HTML 的相同视觉层次结构。 在上面的例子中 ul 嵌套在类 .nav 上图中显示了更多的嵌套方法。&总是指上面的选择。

Partials

您可以创建包含 css 或 sass 小片段的部分。它在维护大型模块时非常有用。部分文件被命名为前导下划线，如_partial.scss。并且它可以通过@use规则或@import规则在其他文件中使用。

@use

@use 规则从其他 Sass 样式表加载 mixin、函数和变量，并将来自多个样式表的 CSS 组合在一起。由@use 加载的样式表称为“模块”。Sass 还提供了具有有用功能的内置模块。

@import

Sass 扩展了@import 规则就像@use。与需要浏览器在呈现页面时发出多个 HTTP 请求的普通 CSS 导入不同，Sass 导入完全在编译期间处理。这使得一切都全球化。
由于@import 的一些属性，使用@use 是更可取的

@mixin

它允许您定义可以多次使用的样式。 我们可以在 mixin 中传递参数，使其在每次调用时都可以自定义。我们还可以设置默认参数值，如下例所示。

@function

这些功能允许您在 Sass 脚本值上定义复杂的操作，您可以在整个样式表中重用这些操作。它们以清晰的方式促进了对常见公式和行为的抽象。与其他所有函数语法一样，它遵循相同的规则。 在上图中，我们创建了一个 sum 函数。

尽管函数具有设置全局变量等副作用在技术上是可行的，但强烈建议不要这样做。使用函数只是为了计算值和混合休息。

@extend

有时我们必须使用另一个类的所有样式，而我们只需要添加一些特定的属性。当我们使用@extend 时就是这种情况。

Operators

我们还可以使用 sass 进行一些数学运算。 为了执行操作，数量必须具有相同的单位，如 px、rem 或 %