SASS&LESS

https://sass-lang.com.cn/guide/

SASS

https://sass-lang.com.cn/guide/

CSS 本身可能很有趣，但样式表变得越来越大、越来越复杂，也越来越难以维护。这就是预处理器可以提供帮助的地方。Sass 拥有 CSS 中尚不存在的功能，例如嵌套、Mixin、继承和其他巧妙的功能，这些功能可以帮助你编写健壮且易于维护的 CSS。

一旦你开始使用 Sass，它会获取你预处理的 Sass 文件并将其保存为一个正常的 CSS 文件，你可以在你的网站中使用它。

Sass 有两种语法！SCSS 语法 (.scss) 最常用。它是 CSS 的超集，这意味着所有有效的 CSS 也是有效的 SCSS。缩进语法 (.sass) 比较少见：它使用缩进而不是花括号来嵌套语句，使用换行符而不是分号来分隔它们。我们所有的示例都以这两种语法提供。

变量

可以将变量视为一种存储信息的方式，你希望在整个样式表中重用这些信息。你可以存储诸如颜色、字体堆栈或任何你认为需要重用的 CSS 值之类的内容。Sass 使用 $ 符号来使某些内容成为变量。下面是一个例子

scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
===============>css
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套

在编写 HTML 时，你可能已经注意到它具有清晰的嵌套和视觉层次结构。另一方面，CSS 没有。

Sass 允许你以遵循 HTML 相同视觉层次结构的方式嵌套 CSS 选择器。请注意，过度嵌套的规则会导致过度限定的 CSS，这可能难以维护，并且通常被认为是不好的做法。

考虑到这一点，以下是一些网站导航的典型样式示例

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

  li { display: inline-block; }

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

CSS 输出

css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

部分

你可以创建部分 Sass 文件，其中包含你可以包含在其他 Sass 文件中的少量 CSS 代码片段。这是一种模块化 CSS 并帮助保持易于维护的好方法。部分是一个以下划线开头的 Sass 文件。你可能会将其命名为 _partial.scss 之类的内容。下划线让 Sass 知道该文件只是一个部分文件，并且不应生成到 CSS 文件中。Sass 部分与 @use 规则一起使用。

模块

你不必将所有 Sass 都写入单个文件。你可以使用 @use 规则根据需要将其拆分。此规则将另一个 Sass 文件加载为模块，这意味着你可以使用基于文件名命名空间的 Sass 文件中的变量、Mixin 和 函数。使用文件还将在编译的输出中包含它生成的 CSS！

scss
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
scss
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

请注意，我们在 styles.scss 文件中使用了 @use 'base';。当你使用文件时，不需要包含文件扩展名。Sass 很智能，会帮你解决这个问题。

Mixin

CSS 中的一些东西写起来有点乏味，尤其是在使用 CSS3 和许多存在的供应商前缀时。Mixin 允许你创建要在整个站点中重用的 CSS 声明组。它有助于使你的 Sass 非常 DRY。你甚至可以传入值以使你的 Mixin 更灵活。以下是一个 theme 的示例。

类似函数

scss
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

对应CSS

css
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

要创建 Mixin，可以使用 @mixin 指令并为其命名。我们将 Mixin 命名为 theme。我们还在括号内使用变量 $theme，以便我们可以传入我们想要的任何 theme。创建 Mixin 后，你就可以将其用作以 @include 开头的 CSS 声明，后跟 Mixin 的名称。

扩展/继承

使用 @extend 可以让你从一个选择器共享一组 CSS 属性到另一个选择器。在我们的示例中，我们将创建一个简单的错误、警告和成功的消息系列，使用另一个与扩展一起使用的功能，即占位符类。占位符类是一种特殊类型的类，只有在扩展时才会打印，并且可以帮助保持编译后的 CSS 整洁。

scss
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

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

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

.warning {
  @extend %message-shared;
  border-color: yellow;
}

转换为CSS

css
/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

上面代码的作用是告诉 .message、.success、.error 和 .warning 的行为与 %message-shared 完全一样。这意味着在 %message-shared 出现的地方，.message、.success、.error 和 .warning 也会出现。魔法发生在生成的 CSS 中，其中每个类都将获得与 %message-shared 相同的 CSS 属性。这有助于避免在 HTML 元素上编写多个类名。

除了占位符类之外，你还可以扩展 Sass 中的大多数简单 CSS 选择器，但使用占位符是确保你没有扩展样式中其他地方嵌套的类的最简单方法，这可能导致 CSS 中出现意外的选择器。

请注意，%equal-heights 中的 CSS 没有生成，因为 %equal-heights 从未扩展。

运算符

在 CSS 中进行数学运算非常有帮助。Sass 有几个标准的数学运算符，如 +、-、*、math.div() 和 %。在我们的示例中，我们将进行一些简单的数学运算来计算 article 和 aside 的宽度。

scss
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

对应CSS

css
.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

我们创建了一个非常简单的流体网格，基于 960px。Sass 中的操作允许我们执行诸如获取像素值并将它们转换为百分比之类的事情，而无需太多麻烦。

文档(更深入学习)

https://sass-lang.com.cn/documentation/

Less

https://lesscss.org/

评论

评论加载中……