Sass 基础

在使用 Sass 之前,你需要在项目中进行设置。如果你只想在此处浏览,请继续,但我们建议你首先安装 Sass。如果你想了解如何设置所有内容,请点击此处

预处理预处理永久链接

单独使用CSS可能很有趣,但样式表变得越来越大、越来越复杂,并且更难维护。此时,预处理器可以提供帮助。Sass 具有CSS中尚不存在的功能,如嵌套、混合、继承以及其他帮助你编写健壮、可维护 CSS的便捷功能。

一旦你开始使用 Sass,它将获取你的预处理 Sass 文件,并将其另存为一个可以在你的 网站中使用的普通CSS文件。

实现此目的的最直接方法是在你的终端中。一旦安装了 Sass,你可以使用sass命令将 Sass 编译为CSS。你需要告诉 Sass 从哪个文件进行构建,以及将CSS输出到何处。例如,从你的终端运行sass input.scss output.css将获取一个 Sass 文件input.scss,并将该文件编译为output.css

你还可以使用--watch标志监视单个文件或目录。监视标志告诉 Sass 监视你的源文件是否有更改,并在每次保存 Sass 时重新编译CSS。如果你想监视(而不是手动构建)你的input.scss文件,只需将监视标志添加到你的命令中,如下所示

sass --watch input.scss output.css

你可以通过使用文件夹路径作为输入和输出,并用冒号分隔它们来监视和输出到目录。在此 示例中

sass --watch app/sass:public/stylesheets

Sass 会监视 app/sass 文件夹中的所有文件以进行更改,并将 CSS 编译到 public/stylesheets 文件夹。

💡 有趣的事实

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;
}

Sass 语法

$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;
}



Sass 处理后,它会获取我们为 $font-stack$primary-color 定义的变量,并输出带有我们变量值的普通 CSS。在使用品牌颜色并在整个 网站中保持一致时,这会非常强大。


嵌套嵌套永久链接

在编写 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;
  }
}

Sass 语法

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

  li
    display: inline-block

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


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;
}


您会注意到 ullia 选择器嵌套在 nav 选择器中。这是一个组织 CSS 并使其更 可读的绝佳方式。


局部局部永久链接

你可以创建部分 Sass 文件,其中包含一些 CSS 代码段,你可以将这些代码段包含在其他 Sass 文件中。这是模块化你的 CSS 并帮助保持其易于维护的绝佳方式。部分文件是一个以以下划线开头的 Sass 文件。你可以将其命名为类似 _partial.scss 的名称。下划线让 Sass 知道该文件只是一个部分文件,并且不应生成到 CSS 文件中。Sass 部分文件与 @use 规则一起使用。


模块模块永久链接

兼容性
Dart Sass
自 1.23.0 起
LibSass
Ruby Sass

目前只有 Dart Sass 支持 @use。其他实现的用户必须改用 @import 规则

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

SCSS 语法

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

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

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

Sass 语法

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

body
  font: 100% $font-stack
  color: $primary-color

// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

CSS 输出

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}








请注意我们在 styles.scss 文件中使用 @use 'base';。当你使用文件时,你不需要包含文件扩展名。Sass 很智能,会为你弄清楚 它。


混合混合永久链接

CSS 中有些东西写起来有点乏味,尤其是在使用 CSS3 和许多供应商前缀的情况下。混合让你可以制作一组 CSS 声明,以便在整个网站中重复使用。它有助于让你的 Sass 非常DRY。你甚至可以传入值来让你的混合更灵活。以下是 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);
}


Sass 语法

@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 输出

.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 指令并为其指定一个名称。我们已将我们的混合命名为 theme。我们还在括号内使用了变量 $theme,以便我们可以传入我们想要的任何 theme。创建混合后,你可以使用它作为以 @include 开头的 CSS 声明,后跟 混合的名称。


扩展/继承扩展/继承永久链接

使用 @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;
}

Sass 语法

/* 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 输出

/* 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()%。在我们的示例中,我们将进行一些简单的数学运算,以计算 articleaside 的宽度。

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;
}

Sass 语法

@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 输出

.container {
  display: flex;
}

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

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


我们创建了一个非常简单的流体网格,基于 960px。Sass 中的运算让我们可以执行一些操作,例如获取像素值并将其转换为百分比,而无需太多 麻烦。