Logo

菜单

发布于 2026-01-06 1 阅读
0

SCSS入门指南——功能强大的CSS预处理器

SCSS入门指南——功能强大的CSS预处理器

你是否曾经编写过几行 CSS 代码，并觉得应该有一种方法可以更轻松快捷地编写 CSS 代码？SCSS（Sassy CSS）正是为此而生。你是否想过将 HTML 元素嵌套在其父元素内？SCSS 正是为此而生的。不得不承认，这确实是一个非常强大的功能，它让 Web 开发人员编写 CSS 代码变得更加轻松。在本文中，我们将探讨 SCSS 的诸多特性以及更多内容。

先决条件

  • 具备 HTML 和 CSS 的基础知识（至少用它们构建过一个简单的网页）。

  • 代码编辑器（推荐使用 VS Code）。

  • 以及一个浏览器（推荐使用Chrome或Firefox）。

为什么选择 SCSS？

SCSS（Sassy CSS）是一种预处理器脚本语言，它会被编译成普通的 CSS。SCSS 通过添加变量、嵌套、mixin 等特性扩展了 CSS 的功能。以下列举了一些您可能考虑使用 SCSS 而不是纯 CSS 来设计静态和动态网页样式的原因。

  1. 变量： SCSS 允许您定义变量，这对于存储可重用的值（例如颜色、字体大小和间距）非常有用。这使得保持样式的一致性以及在一个地方更改值变得更加容易。

  2. 嵌套： SCSS 允许您将 CSS 规则嵌套在父选择器中。这有助于提高样式的可读性，并使其更具条理性，尤其是在处理复杂结构时。

  3. Mixins： Mixins 允许您定义可重用的样式块，这些样式块可以在多个地方引用。这有助于减少代码重复，并使您的样式更易于维护。

  4. 局部文件和导入： SCSS 支持将样式拆分成更小的模块化文件，称为局部文件（partials）。然后，您可以使用@import指令将这些局部文件合并成一个单独的 CSS 文件。这可以使您的代码库更清晰、更易于管理。

  5. 数学运算： SCSS 允许您对值执行算术运算，这对于响应式布局、间距调整等计算非常有用。

  6. 函数： SCSS 提供了一组内置函数，可用于操作数值、执行颜色计算等。

  7. 条件语句： SCSS 支持 if/else 语句和循环，这对于根据特定条件创建动态样式非常有用。

  8. 易读的语法：大多数开发者都认为 SCSS 的语法比普通 CSS 更易读、更直观。嵌套结构能让代码更容易理解，尤其是在处理复杂的样式场景时。

然而，需要注意的是，选择使用 SCSS 还是纯 CSS 取决于项目的具体需求和性质以及您的个人偏好。如果您正在开发一个样式需求极少的小型项目，纯 CSS 可能就足够了。另一方面，对于规模更大、更复杂的项目，SCSS 可以提供诸多优势，从而带来更高效、更易于维护的样式工作流程。

什么是SCSS？

SCSS，即“Sassy CSS”，是一种 CSS 预处理器脚本语言，它在标准 CSS 的基础上添加了额外的特性和功能。它的开发旨在提高样式表编写和管理的效率和强大功能。SCSS 是 CSS 的超集，这意味着任何有效的 CSS 也都是有效的 SCSS，但 SCSS 为 CSS 扩展了更多功能。

SCSS 最初由Hampton Catlin 于 2006 年开发，后于2009 年由 Natalie Weizenbaum维护。该语言旨在解决编写复杂且易于维护的 CSS 时遇到的一些限制和挑战。SCSS 也被称为“SASS” ，即Syntactically Awesome Stylesheets（语法超棒的样式表）的缩写。

如何安装 SCSS

可以通过在 VS Code 编辑器中下载Live Sass Compiler扩展来安装 SCSS 。
也可以按照以下步骤安装该扩展：

  • 打开 VS Code 编辑器
  • 按下键盘上的 Ctrl + P
  • 输入exe install glenn2223.live-sass

实时 Sass 编译器市场的屏幕截图

SCSS是如何编译的

如下图所示，点击Watch Sass状态栏中的按钮即可编译 SCSS。这将激活 SCSS 的实时编译，之后您可以再次点击Stop Watching Sass状态栏中的按钮来关闭实时编译。

所有在 main.scss 文件中编写的 SCSS 代码都将被编译到该文件夹main.css​​中的文件中。/dist/css

这是使用 SCSS 的项目的屏幕截图。

注意： SCSS 文件以 .scss 为扩展名保存，例如 style.scss。此外，与 HTML 链接所需的文件是main.css目录中的文件./dist/css/main.css，请注意，该main.scss文件是正在编译的文件。另外，main.scss在编写任何 SCSS 代码之前，必须先创建该文件。

SCSS 中的嵌套

大多数 Web 开发人员使用 SCSS 的原因之一是它的嵌套功能。SCSS 允许您将 CSS 规则嵌套在父选择器中。这有助于提高样式的可读性，并使其更具条理性，尤其是在处理复杂结构时。
例如，让我们创建一个简单的 HTML 页面，其中包含两个元素：一个父元素和一个子元素。



<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

让我们添加一些样式，并将这两个元素嵌套在一起。



.parent {
    padding: 2rem;
    background-color: red;

    .child {
        background-color: blue;
        padding: 1rem;
    }
}
Enter fullscreen mode Exit fullscreen mode

上述代码的运行结果如下所示。

以上代码在 Chrome 浏览器上的运行结果如下所示

让我们给父元素添加悬停状态



.parent {
    padding: 2rem;
    background-color: red;

    .child {
        background-color: blue;
        padding: 1rem;
    }

    &:hover {
        background-color: yellow;
    }
}
Enter fullscreen mode Exit fullscreen mode

在嵌套规则中，& 符号（&）用作占位符，用于选择当前或父选择器。

在 SCSS 中声明变量

在 SCSS 中，变量使用 ` $<variable>` 符号声明。参考上面的 HTML 页面，下面是 SCSS 中使用变量的简单方法。



$color-primary: red;
$color-secondary: blue;
$padding-large: 2rem;
$padding-small: 1rem;

.parent {
    padding: $padding-large;
    background-color: $color-primary;

    .child {
        background-color: $color-secondary;
        padding: $padding-small;
    }
}
Enter fullscreen mode Exit fullscreen mode

与 CSS 不同，在 SCSS 中声明变量非常简单，而且这些变量可以保存为局部视图（partials），以便在任何地方使用。我们将在本文后面更深入地探讨局部视图。

在 SCSS 中使用 Mixins

Mixins 是 SCSS 的一项强大功能，它允许您定义可重用的 CSS 属性和规则块。这些块随后可以包含在样式表的不同部分中。Mixins 对于减少代码重复、促进模块化设计以及提高样式表的可维护性尤为有用。

以下是 SCSS 中 mixin 的工作原理：

定义 Mixin：可以使用指令 `mixin`，后跟名称和一组 CSS 属性和规则来定义 Mixin @mixin。以下是一个简单的 Mixin 示例：



@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}
Enter fullscreen mode Exit fullscreen mode

使用 Mixin：上述 Mixin 可以通过在样式表中使用@include指令来调用，指令后跟 Mixin 的名称及其所需的任何参数。以下是一个示例：



.parent {
  @include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.2));
}
Enter fullscreen mode Exit fullscreen mode

在上面的示例中，box-shadowmixin 被包含在.parent类中，应用了指定的 box-shadow 属性。

SCSS 中的函数

SCSS 函数是另一项强大的功能，它使您能够执行计算、操作数值和创建动态样式。SCSS 提供内置函数，也允许您创建自定义函数。SCSS 中的函数与编程语言中的函数类似，它们接受输入（参数）并返回值。

以下是 SCSS 中函数工作原理的示例；
内置函数：SCSS 提供了各种内置函数，可用于操作值、执行计算和修改样式。一些内置函数示例包括 `__getitem__` 、lighten()` __getitem__`、 `__getitem__` 、`__getitem__`、`__getitem__` 等等。darken()rgba()round()percentage()mix()



$color: #3498db;

.lighter-color {
  background-color: lighten($color, 20%);
}
Enter fullscreen mode Exit fullscreen mode

自定义函数： SCSS 还允许您使用指令创建自定义函数@function。自定义函数可以接受参数、执行计算或逻辑运算，并返回值。以下是一个将像素值转换为 rem 的自定义函数示例：



@function px-to-rem($pxValue, $baseFontSize: 16px) {
  @return ($pxValue / $baseFontSize) * 1rem;
}

.text {
  font-size: px-to-rem(18px);
}
Enter fullscreen mode Exit fullscreen mode

SCSS 中局部视图的工作原理

在 SCSS 中，partials 文件可以将样式表拆分成更小、更模块化的文件，从而更好地组织和维护代码。SCSS 中的 partial 文件通常以下划线 (_) 为前缀，并以 .scss 为扩展名。它们包含 CSS 代码片段，可以使用@import指令将其包含并合并到主 SCSS 文件中。

以下是 SCSS 中 partials 的工作原理

  1. 创建局部文件：局部文件用于存放样式中的特定部分，例如字体、颜色、布局等。要创建局部文件，您需要为其命名，文件名以下划线开头，以“.”结尾.scss。例如，_variable.scss`.partial.js`。

2.
在局部文件中定义样式：
在局部文件中，您可以像在常规 SCSS 文件中一样定义样式。例如，_variables.scss 可以包含颜色和字体相关的样式：



// _variables.scss

$base-font-size: 16px;
$color-primary: red;
$color-secondary: blue;
$padding-large: 2rem;
$padding-small: 1rem;

body {
  font-family: Arial, sans-serif;
  font-size: $base-font-size;
}
Enter fullscreen mode Exit fullscreen mode

3.
导入局部样式表：要将局部样式表中的样式包含到主 SCSS 文件中，请使用@import不带下划线和扩展名的指令。导入局部样式表时，无需在导入语句中包含下划线或 .scss。//
main.scss



@import 'variables';

.parent {
    padding: $padding-large;
    background-color: $color-primary;

    .child {
        background-color: $color-secondary;
        padding: $padding-small;
    }
}
Enter fullscreen mode Exit fullscreen mode

SCSS中的继承

SCSS 还允许使用 ` @extend<property>` 指令后跟元素选择器，将属性从父元素继承到子元素
。以下是 SCSS 中继承的工作原理。



.parent {
    display: flex;
    justify-content: center;
    align-items: center;

     .child {
        @extend .parent;
        flex-wrap: wrap;
     }
}
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，.parent元素的所有属性都将被继承.child，这类似于 mixin，但略有不同，因为 mixin 更灵活。

想了解更多关于 SCSS 的知识？点击下方链接，跟随@codestackr学习 SCSS 课程-链接

文章来源：https://dev.to/classicthedemigod/getting-started-with-scss-the-css-preprocessor-with-superpowers-34ed
救命！黑客正在我的云端挖比特币😱...
🎙️我们将在 DevHunt 上...