Sass初学者指南（附实例）

迪鲁宾
172 阅读6分钟

你是否曾想过SASS代表什么？或者你已经知道它是什么，但还没有花时间去研究和使用它。

无论你是第一次了解它，还是想补习一下这方面的知识，这篇文章都适合你。

在这篇文章中，你将学习Sass的基本原理，它是什么，以及如何使用Sass的强大功能来加快编写风格的过程。

前提条件

本文假设你具备以下条件

  • 对HTML和CSS的基本了解
  • 一个代码编辑器（推荐使用VS Code）。如果你没有安装它，请在这里下载。
  • 一个浏览器（推荐使用Chrome或Firefox）。

Sass到底是什么？

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

让我们面对现实吧：编写CSS有时是很困难的，尤其是在今天这个用户界面越来越复杂的世界。

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

在这种情况下，Sass来拯救你。它可以帮助你在编写CSS时坚持DRY（Do Not Repeat Yourself）理念。

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允许变量和大块的代码（mixins），可以反复使用。这可以帮助你节省时间，使你能够更快地编码。
  • 有组织的代码:Sass通过使用参数帮助保持你的代码组织。
  • 跨浏览器兼容性:Sass被编译成CSS，并添加所有必要的供应商前缀，所以你不必担心手动写出它们。

Sass的特点

以下是一些使Sass成为真正具有超能力的CSS的特性。

Sass的变量

你可以在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代码中，你可能会注意到安培尔符号& ，与hover伪类一起使用。这被称为父选择器。

父选择器，& ，是Sass发明的一个特殊选择器，在嵌套选择器中用来指代外部选择器。来源 -Sass 文档

因此，在上面的代码中，& 将指代父标签，也就是锚标签a 。

你可以查看我的文章，了解如何使用BEM方法实现Sass。

Sass中的偏移量

这是Sass众多超强功能中的一个，给你带来的优势。

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

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

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

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

你会注意到，下划线和.scss 没有被添加。这是因为Sass自动假定你指的是.sass 或.scss 文件。

Sass中的混合元素

CSS的另一个主要问题是，你会经常使用一组类似的样式。混合元素允许你封装一组样式，并使用@include 关键字在代码中的任何地方应用这些样式。

在使用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中删除。你可以在文档中读到它。

所以，应该这样写:

@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%);
}

如何为本地开发设置Sass

很好!现在我们已经了解了Sass的 "理论 "方面，让我们进入代码来更好地了解它是如何工作的。

在本节中，你将学习如何设置一个本地开发环境，同时也将通过我准备的一个简单的登陆页面。

请查看Codesandbox上的演示和GitHub上的代码库。

编译Sass的方法

有不同的方法来编译Sass文件，这些方法是:

  • VS代码扩展
  • 使用NPM全局安装
  • 使用开源应用程序安装，如Compass.app、Live Reload和Koala。
  • 使用Homebrew安装（针对MacOS）。

在本教程中，我们将使用VS代码扩展选项，因为它是最容易上手的。

如何为VS代码设置Sass

第1步：安装Live Sass编译器

首先，启动Visual Studio Code。一旦它被加载，去左边的侧板，选择扩展标签。

1

VS Code中的扩展选项卡

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

第二步：设置保存位置

现在改变文件路径，使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",
    }
  ],

第3步：编译Sass

现在，在保存设置后，回到Sass文件，并点击窗口最下方的 "Watch Sass "按钮。

2

点击 "Watch Sass"

在你点击该按钮后，会有两个文件被创建：.css 和styles 文件夹中的.css.map 。

然而，你不应该改变它们中的任何一个。因为它已经帮助你在每次保存新的样式时将Sass编译成CSS。

第四步：链接CSS文件

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

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

现在在你的浏览器中运行该文件。这应该是下面CodeSandbox中的结果布局。

走过代码

下面是对上一节中的代码的解释:

  • 我们在index.html 文件里有一个基本的标记，它包含一个标题和主页/英雄部分。

    • 它包含一个指向CSS文件的链接，该文件是扩展程序为我们编译的。
    • 还有一些用于响应式菜单切换的JavaScript。

  • main.scss 被编译，产生的CSS文件main.css 被导入到index.html 。

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

  • 主Scss文件main.scss ，导入所有的参数。_base.scss,_components.scss,_home.scss,_layout.scss _responsive.scss ,_variables.scss 。

    @import "variables";
@import "base";
@import "layout";
@import "components";
@import "home";
@import "responsive";

  • 基础部分包含了flex 和grid 的混合函数，它们被包含在我们需要它们的地方。

总结

祝贺你!如果你能坚持到最后，这意味着你已经了解了Sass的工作原理和它很酷的特性，并希望你能尽快开始使用它。

谢谢你的阅读，并祝你编码愉快

avatar
文章
阅读
粉丝