哪个命令可用于从命令行运行 SASS 代码?

cssweb developmentfront end technology更新于 2024/4/28 0:12:17

SASS 是 Syntactically Awesome Style Sheets 的缩写。它是一个预处理过程，用于编译 SCSS 代码并将其转换为 CSS(层叠样式表)。它是 CSS 的超集。

本教程将教我们如何使用终端编译 SCSS 代码。

从终端运行 SASS 的步骤

用户应按照以下步骤从终端运行 SASS 代码。

步骤 1 − 用户应已在本地计算机上安装 Node.JS。如果没有，请前往 https://nodejs.org/en/download，从那里下载并安装。
步骤 2 − 现在，我们需要创建一个 Node 项目。在项目目录中打开终端，并在终端中运行以下命令以启动新的 NodeJS 项目。

npm init -y

npm i node-sass

"scss": "node-sass --watch scss -o css"

步骤 5 − 在项目目录中创建 SCSS 和 CSS 文件夹。此外，在 SCSS 目录中添加 style.scss 文件，在 CSS 目录中添加 style.css 文件。

以下是项目目录结构。

$height: 45rem;
$border: 2px, solid, blue;

div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}

npm run scss

div {
   height: 45rem;
   border: 2px, solid, blue;
   border-radius: 1rem;
}

现在，每当用户更改 style.scss 文件时，style.css 文件中的输出也会随之更改。

使用 SASS 而不是 CSS 有很多好处。

变量 − SASS 允许我们创建变量，这可以简化 CSS 代码并降低复杂性。例如，我们可以定义一个 backgroundColor 变量并为其赋值。之后，我们可以在整个代码中使用变量，而不是硬编码的颜色值。
混合 − Sass 允许我们定义混合，它们是可重用的代码块，就像我们可以在代码其他部分使用的函数一样。
嵌套− Sass 允许我们将 CSS 选择器嵌套在一起，使我们的代码更有条理，更易于阅读。例如，我们可以将 ul 选择器嵌套在 nav 选择器中，以设置导航菜单的样式。
导入− 我们可以在 SASS 中创建部分 SCSS 文件，并将其导入到其他 SCSS 文件中，从而将不同组件的代码分解到单独的文件中。