Sass 初学者指南

AirStar
178 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

Sass 到底是什么？

Sass (Syntactically Awesome Style Sheets) 是一个 CSS 预处理器，它赋予你的 CSS 超能力。

编写 CSS 有时可能很困难，尤其是在当今用户界面日益复杂的世界中。

很多时候，你会发现你经常重复自己。

在这种情况下，Sass 可以帮助你在编写 CSS 时坚持 DRY（不要重复自己）理念。

Sass 提供了一个编译器，允许我们以两种不同的语法编写样式表，缩进和 SCSS。现在让我们来看看如何使用。

缩进语法

这是缩进的旧语法，去掉了花括号和分号。它的文件扩展名为.sass.

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    text-decoration: none

SCSS 语法

这是更新和更流行的语法。它本质上是 CSS3 语法的一个子集。这意味着您可以编写带有一些附加功能的常规 CSS。

由于其高级特性，它通常被称为Sassy CSS。它的文件扩展名为.scss.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
  }
}

快速免责声明：本文使用 SCSS 语法，因为它使用更广泛。

Sass 是如何工作的？

Sass 的工作方式是，当您在.scss文件中编写样式时，它会被编译成常规的 CSS 文件。然后将 CSS 代码加载到浏览器中。

这就是为什么它被称为预处理器。

为什么要使用 Sass？

  • 易于学习：如果您已经熟悉 CSS，那么您会很高兴知道 Sass 实际上有类似的语法，因此您可以开始使用它，即使在本教程之后；）
  • 兼容性：它与所有版本的 CSS 兼容。因此，您可以使用任何可用的 CSS 库。
  • 节省时间：由于其强大的功能，它有助于减少 CSS 的重复。
  • 可重用代码：Sass 允许变量和代码块（mixin）可以反复重用。这可以帮助您节省时间并使您能够更快地编写代码。
  • 有组织的代码：Sass 通过使用部分来帮助保持代码有条理。
  • 跨浏览器兼容性：Sass 被编译成 CSS 并添加所有必要的供应商前缀，因此您不必担心手动将它们写出来。

ass 中的变量

你可以在 Sass 中声明变量。这是 Sass 的优势之一，因为我们可以为各种属性定义变量并在任何文件中使用它们。

这样做的好处是，如果该值发生变化，您只需更新一行代码。

这是通过用美元符号命名变量$然后在代码的其他地方引用它来完成的。

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

嵌套在 Sass 中

大多数时候，在编写 CSS 时，类经常是重复的。我们可以通过在父元素中嵌套样式来避免这种重复。

在 CSS 中，

nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a:hover {
  color: #069c54;
}

使用 Sass，上面的代码可以这样写：

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

父选择器

&在上面的 Sass 代码中，您可能会注意到与悬停伪类一起使用的 & 符号。这称为父选择器。

父选择器&是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。来源——Sass 文档

因此，在上面的代码中，&将引用作为锚标记的父级a。

随着样式表随着时间的推移变得越来越大，维护它们变得越来越困难。正因为如此，将样式表分成更小的块才有意义。换句话说，Partials 帮助你组织和构建你的代码。

要声明一个部分，我们将使用下划线开始文件名，并使用该指令_将其添加到另一个 Sass 文件中。@import

例如，如果我们有一个_globals.scss、_variables.scss和_buttons.scss，我们可以将它们导入到主 SCSS 文件main.scss中。

@import "globals";
@import "variables";
@import "buttons";

你会注意到.scss没有添加下划线和 。那是因为 Sass 会自动假定您指的是.sassor.scss文件。

Sass 中的 Mixin

CSS 的另一个主要问题是您会经常使用一组相似的样式。Mixins 允许您封装一组样式，并使用@include关键字在代码中的任何位置应用这些样式。

使用 mixins 的一个例子是使用 Flexbox。

@mixin flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  background: #ccc;
}

.card {
  @include flex-container;
}

.aside {
  @include flex-container;
}

Sass 函数和运算符

Sass 提供了一套工具来帮助编写更多的程序化代码。

Sass 提供了内置函数，使我们能够进行返回特定值的计算和操作。

它们的范围从颜色计算到数学运算，例如获取随机数和计算大小，甚至是条件。

它还支持数学运算符，如+, -, ``, *,/和%，我们可以将其与calc函数一起使用。

下面是一个使用像素到 rem 转换函数的示例：

@function pxToRem($pxValue) {
  $remValue: ($pxValue / 16) + rem;
  @return $remValue;
}

div {
  width: pxToRem(480);
}

但是，重要的是要注意/除法运算符已弃用，并将在 Dart Sass 2.0.0 中删除。您可以在Docs中了解它。

所以，应该这样写：

@use "sass:math";

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

div {
  width: pxToRem(480px); // gives 30rem
}

这是 mixin 中条件逻辑的示例：

@mixin body-theme($theme) {
  @if $theme == "light" {
    background-color: $light-bg;
  } @else {
    background-color: $dark-bg;
  }
}

Sass 还提供了lighten和darken函数来按一定百分比调整颜色。

例如：

$red: #ff0000;

a:visited {
  color: darken($red, 25%);
}

如何为 VS 代码设置 Sass

第 1 步：安装 Live Sass 编译器

首先，启动 Visual Studio Code。加载后，转到左侧的侧面板并选择扩展选项卡。

1

VS Code 中的扩展选项卡

在搜索栏中，搜索“Live Sass Compiler”并安装它。这个扩展帮助我们将 Sass 文件—— .scss（或.sass）——编译成.css文件。

第 2 步：设置保存位置

现在更改文件路径，以便将 Sass 编译到styles文件夹中。

为此，您将对settings.json文件进行更改。

在 VS Code 中，转到文件 > 首选项 > 设置。现在搜索live sass compile更改全局设置。

点击Edit settings.json。

现在，在前几行，您会看到以下代码：

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/"
    }
  ],

更改"savePath": "/"为"savePath": "/styles"，所以它现在看起来像这样：

{
  "liveSassCompile.settings.formats":[
    {
      "format": "expanded",
      "extensionName":".css",
      "savePath":"/styles",
    },

    // You can also use this minified extension for production, as it reduces the file size

    {
      "format": "compressed",
      "extensionName":".min.css",
      "savePath":"/styles",
    }
  ],

第三步：编译 Sass

现在，保存设置后，返回 Sass 文件，然后单击窗口最底部的“Watch Sass”按钮。

2

点击“观看萨斯”

单击按钮后，将创建两个文件：文件夹中的.css一个。.css.map``styles

但是，您不应该更改其中任何一个。因为它已经帮助您在每次保存新样式时将 Sass 编译为 CSS。

第 4 步：链接 CSS 文件

然后，将 CSS 文件链接到您的index.html. 在我们的例子中：

    <link rel="stylesheet" href="/styles/main.css" />

结论

恭喜！如果你坚持到最后，这意味着你已经了解了 Sass 的工作原理、它的酷炫功能，并希望你能尽快开始使用它。

avatar
文章
阅读
粉丝