SASS的主要特点

2025-06-07

SASS的主要特点

SASS 有效地为我们提供了许多使用代码的编程优势，现在只需将其应用于样式表即可。

在这篇文章中，我们将深入探讨 SASS 的功能，包括：

  • 变量
  • 嵌套
  • Mixins
  • 功能
  • 部分 & 导入
  • 遗产
  • “&”运算符
  • 控制指令
  • 插值
  • 占位符

让我们开始吧！

SASS变量

变量是一种存储您想要在整个样式表中重复使用的信息的方法。

它们允许我们存储颜色、字体或任何您想要重复使用的 CSS 值！

$当我们想将某物变为变量时，我们就使用符号。

让我们看一个例子！

在我们的 SCSS 中，定义一个颜色变量，如下所示：



$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}
Enter fullscreen mode Exit fullscreen mode

这当然会把我们的颜色设置background-color为黄色。就这么简单！

注意：您可以在 Sass 中使用带有的单行注释//。

当我们运行编译时，它将输出以下 CSS：



body {
  color: #ffff00;
}
Enter fullscreen mode Exit fullscreen mode

在处理大型项目时这变得极其强大！

如果您希望更改整个样式表中使用的颜色，则如果将颜色在一个位置定义为单个变量，则更改起来会简单得多。

除了修改某个位置定义的变量的值之外，还有一种替代方法是查找并替换所有指向该变量的引用。这是一个非常繁琐的任务，尤其是在需要快速更改颜色或字体等参数时。

嵌套

当你观察 HTML 文件的结构时，你会注意到它具有非常清晰的层次结构：



<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

正如您所见，HTML 具有使其非常易于阅读的结构。

而 CSS 则缺乏这种视觉结构。因此，它很快就会变得杂乱无章。

进入 Sass 嵌套！

定义

使用嵌套，我们可以将子选择器嵌套在父选择器内。

这会使代码更加清晰，重复性更低。

例子

以下面的 HTML 为例：



<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>Store</li>
    <li>Contact Us</li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

使用常规 CSS，我们可以这样写：



.navbar {
  background-color: orangered;
  padding: 1rem;
}
.navbar ul {
  list-style: none;
}
.navbar li {
  text-align: center;
  margin: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

这里有很多重复。每次我们想要给 的子类添加样式时navbar，都必须重复类名。

通过 Sass 嵌套，我们可以编写更简洁的代码。

像这样：



.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

使用缩进，您现在可以看到ul和li选择器整齐地嵌套在navbar选择器内。

我们的语法重复性大大降低，阅读起来更加容易！

SASS混合

Mixins 是 Sass 中一个非常强大的功能。我们使用它们将多个 CSS 声明组合在一起，以便在项目中重复使用。

假设我们要创建一个 mixin 来保存转换属性的供应商前缀。

在 SASS 中，我们的代码如下：



@mixin transform {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
Enter fullscreen mode Exit fullscreen mode

要将 mixin 添加到我们的代码中，我们使用@include指令，如下所示：



.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
    @include transform;
  }
}
Enter fullscreen mode Exit fullscreen mode

现在，transform mixin 中的所有代码都将应用于li元素。您还可以将值传递给 mixin，以使其更加灵活。

不要添加指定的值，而是添加一个名称（使用变量，如property）来表示该值，如下所示：



@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
Enter fullscreen mode Exit fullscreen mode

现在，无论何时调用 mixin，我们都可以传递任何我们喜欢的值：



@include transform (rotate(20deg));
Enter fullscreen mode Exit fullscreen mode

SASS函数

Sass函数可以接收参数并返回单个值。

他们在编写 CSS 代码中添加了编程元素，现在我们可以进行数学运算了！

标准数学运算符+、-、*、/和%均可使用。

示例函数

以下函数可以接受两个参数，$first-number和$second-number。该函数返回的值是两个变量的和：



@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}
Enter fullscreen mode Exit fullscreen mode

padding假设我们想用两个独立值的总和来替换某个属性的值。

我们将调用我们的函数并传入如下参数：



.box1 {
  padding: add-numbers(5px, 10px);
}
Enter fullscreen mode Exit fullscreen mode

最终的 CSS 输出结果如下：



.box1 {
  padding: 15px;
}
Enter fullscreen mode Exit fullscreen mode

让我们看看完整的代码：



<html>
  <head>
    <title>Page Title</title>
  </head>
<body>
<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>Store</li>
    <li>Contact Us</li>
  </ul>
</nav> 
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

我们的 SASS：



@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}

.navbar {
  background-color: orangered;
  padding: add-numbers(5px, 100px);
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

如你所见，函数可以帮助你编写更易读、更符合 DRY 原则的 Sass，因为你可以非常高效地利用可复用的逻辑。当你开始处理更大、更复杂的项目时，这会带来巨大的改变！

SASS 部分和导入

SASS 中的部分帮助我们将文件分解为更小的文件，而不会影响性能。

使用部分功能使我们能够模块化 CSS，以帮助保持可维护性。

我们将 Sass 拆分成多个单独的文件，分别代表不同的组件。部分组件的名称始终以下划线开头_。然后，我们使用指令导入该部分组件@import。

使用部分

假设我们的 Sass 文件变得相当大。我们可能会选择创建一个只包含与文件头部分相关的代码的部分文件；我们会调用它_header.scss并将相应的代码移动到这个新文件中。

然后我们将其导入回main.css，如下所示：



// In main.scss
@import 'header';
Enter fullscreen mode Exit fullscreen mode

注意：导入文件时，无需包含_或.scss文件扩展名。

CSS 与 SASS 中的 @import

当然，该@import指令在 CSS 中也可用。但是，两者之间存在一个重要的区别。每当在 CSS 中使用 import 语句时，都会向服务器发出 HTTP 请求。这会增加资源请求量，并对网页性能产生负面影响。SASS 不会这样做。SASS 会获取要导入的文件，并将其与要导入的文件合并。因此，您可以向 Web 浏览器提供单个 CSS 文件，而不会影响性能。

SASS 继承

Sass 的另一个很棒的特性是继承。我们使用@extend指令来实现它。

继承是 SASS 的一项功能，它允许多个类彼此共享一组公共属性。

一个例子

用于设置按钮样式的一些典型 CSS 代码：



.button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

如果我们的网站上恰好有许多按钮，并且所有按钮的样式都相似，那么我们就有很好的继承理由！

我们将通过继承来实现辅助按钮，如下所示：



.button-secondary {
  @extend .button;
  background-color: #4CAF50; // Green
}
Enter fullscreen mode Exit fullscreen mode

我们的.button-secondary类将采用设置的所有属性和值.button class，但background-color我们决定将其设置为绿色。

使用继承有助于我们保持代码整洁、干净，并专注于构建可重用的组件。

SASS 中的 '&' 运算符

在 SASS 中嵌套&时经常使用与号运算符，这是一个非常有用的功能。

它可以节省大量时间，特别是当您碰巧使用BEM 方法编写样式表，或使用任何系统命名约定作为类名时。

请参阅以下 HTML：



<button class = "btn btn--red"> Click me! </button>
Enter fullscreen mode Exit fullscreen mode

典型的样式是这样的：



.btn {
  display: inline-block;
  padding: 15px 32px;
}
.btn--red {
  background-color: #ff0000; // Red
}
.btn:hover {
  background-color: #fff; // White
}
Enter fullscreen mode Exit fullscreen mode

使用&操作符我们可以更加高效：



.btn {
  display: inline-block;
  padding: 15px 32px;
  &--red {
    background-color: #ff0000; // Red
  }
  &:hover {
    background-color: #fff; // White
  }
}
Enter fullscreen mode Exit fullscreen mode

请注意，我们现在嵌套了使用相同名称的子选择器，由运算符 .name.btn表示。&

编译时，&运算符将被其封闭的选择器名称替换！

了解 SASS 控制指令

SASS 中使用控制指令和表达式来仅在某些定义条件下包含样式。

作为一项功能，它们相当先进，主要在 mixin 中使用。常用指令包括@if、@else和。@for@while

@if 和@else

和指令类似于@ifJavaScript中的和语句。@elseifelse

@if接受一个表达式并执行其块中包含的样式 — — 如果评估结果不为假（或为空）。

@else然后检查之前的@if评估结果是否为假。

例如：



@mixin heading($size) {
  @if $size == large {
    font-size: 4rem;
  }
  @else if $size == medium{
    font-size: 3rem;
  }
  @else if $size == small {
    font-size: 2rem;
  }
  @else {
    font-size: 1rem;
  }
}

.h1 {
  @include heading(large);
}

.h6 {
  @include heading(small);
}
Enter fullscreen mode Exit fullscreen mode

这里我们使用了一个标题混合宏，它接受$size一个参数。根据传递给混合宏的值，我们可以为每个标题设置不同的大小。

@为了

你可以使用@for指令来执行一组语句指定次数。这实际上就是一个循环。

它有两种变体。第一种使用through关键字，它将从头到尾执行语句（包括开头和结尾）。

使用 through 的示例：



@for $i from 1 through 5 {
   .list-#{$i} {
      width: 2px * $i;
   }
}
Enter fullscreen mode Exit fullscreen mode

这将产生以下 CSS 输出：



.list-1 {
  width: 2px; 
}

.list-2 {
  width: 4px; 
}

.list-3 {
  width: 6px; 
}

.list-4 {
  width: 8px; 
}

.list-5 {
  width: 10px; 
}
Enter fullscreen mode Exit fullscreen mode

如果我们将through关键字替换为to，则循环将变为排他循环。区别在于，当变量等于end时，循环不会执行。

使用的示例to：



@for $i from 1 to 5 {
   .list-#{$i} {
      width: 2px * $i;
   }
}
Enter fullscreen mode Exit fullscreen mode

这将产生以下 CSS：



.list-1 {
  width: 2px; 
}

.list-2 {
  width: 4px; 
}

.list-3 {
  width: 6px; 
}

.list-4 {
  width: 8px; 
}
Enter fullscreen mode Exit fullscreen mode

@尽管

我们可以使用指令来实现上述代码@while。顾名思义，当条件返回 true 时，它​​将继续输出由语句生成的 CSS。

语法如下：



$i: 1;
@while $i < 6 {
  .list-#{$i} {       
     width: 2px * $i;   
  }
  $i: $i + 1;
}
Enter fullscreen mode Exit fullscreen mode

输出是相同的，因此您可以根据语法选择您的个人偏好。

SASS 插值

插值本质上是一种代码插入。它允许我们将 SASS 表达式插入到代码中。我们可以用它将选择器或属性名称、带引号或不带引号的字符串等用作变量。

语法

要插入表达式，我们需要使用 来包装表达式#{ }。



#{$variable_name}
Enter fullscreen mode Exit fullscreen mode

让我们看一个例子来展示如何使用 mixin 进行插值：



@mixin interpolation($editable, $val, $val2, $prop1, $prop2)
{
    background-#{$editable}: $val;
    position: $val2;
    #{$prop1}: 0px; 
    #{$prop2}: 0px;
}


.block1{
    @include interpolation("image", url("img.png"), absolute, top, right);
}

.block2{
    @include interpolation("color", lightgray, absolute, top, left);
}
Enter fullscreen mode Exit fullscreen mode

CSS 编译结果如下：



.block1 {
    background-image: url("img.png");
    position: absolute;
    top: 0px;
    right: 0px;
}

.block2 {
   background-color: lightgray;
   position: absolute;
   top: 0px;
   left: 0px;
}
Enter fullscreen mode Exit fullscreen mode

正如您所见，使用它来创建动态可重用的代码非常容易！

使用插值的主要原因

  • 我们可以使用动态创建的名称作为属性名称、变量名称或用于其他类似用途。
  • 我们可以创建高度可重用的代码！

SASS占位符

在 SASS 中，占位符的外观和行为与类选择器非常相似，只是它以 a 开头%并且不包含在 CSS 输出中。

我们的%placeholder选择器包含一些宽度和高度声明：



%placeholder {
    width: 100%;
    height: 100%;
}
body {
    @extend %placeholder;
}
p {
    @extend %placeholder;
}
Enter fullscreen mode Exit fullscreen mode

请注意，我们使用了@extend指令，它允许一个选择器继承另一个选择器的样式。

CSS 输出如下：



body, p {
    width: 100%;
    height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

简单，正如预期！

但是，预处理器将跳过它%placeholder并且它不会包含在最终的 CSS 文件中。

为什么要使用占位符？

占位符选择器主要在编写 SASS 库时有用，其中每个样式规则都是可选的。

通常，在开发自己的项目时，最好直接扩展一个类选择器。不过，了解这一点还是很有好处的，因为如果你开始开发更大规模的项目，它可能会非常有用。

总结

就这样！恭喜你读到这里😅，这篇文章真的挺长的！希望你现在对 SASS 的功能有了更多的了解。

在我的下一篇文章中，我们将学习如何构建我们的 SASS 项目！

你准备好将你的开发技能转化为自由职业事业了吗？无论你是自由职业新手，还是想提升现有技能，我都会教你成为一名成功自由职业者所需的一切知识！

立即开始阅读我的《自由职业完整指南》。

自由职业套餐完整指南

现已推出👉 https://easeout.gumroad.com/l/freelance

关于我一些...

嘿，我是蒂姆！👋 我是一名自由职业企业主、网站开发人员和作家。 

我教授新手和经验丰富的自由职业者如何打造可持续且成功的自由职业事业。如果您想阅读更多我的文章，请访问我的博客。

感谢阅读🎉

文章来源：https://dev.to/timothyrobards/the-main-features-of-sass-47k2
Devto 翻译
PREV
创建一个展示你的 Instagram 帖子的 Gatsby 作品集
NEXT
我如何说服我的团队编写更多文档