数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用哪个命令从命令行运行 SASS 代码？
SASS 是“Syntactically Awesome Style Sheets”（语法高效样式表）的缩写。它是一个预处理器，编译 SCSS 代码并将其转换为 CSS（层叠样式表）。它是 CSS 的超集。
本教程将教你如何使用终端编译 SCSS 代码。
从终端运行 SASS 的步骤
用户应按照以下步骤从终端运行 SASS 代码。
步骤 1 - 用户应该在其本地计算机上安装 Node.JS。如果没有，请访问 https://node.org.cn/en/download 下载并安装。
步骤 2 - 现在，我们需要创建一个 Node 项目。在项目目录中打开终端，并在终端中运行以下命令以启动新的 NodeJS 项目。
npm init -y
步骤 3 - 现在在终端中运行以下命令以在当前 Node 项目中安装 SASS。
npm i node-sass
步骤 4 - 打开当前项目的 package.json 文件，并在“scripts”对象中添加以下行。
"scss": "node-sass --watch scss -o css"
步骤 5 - 在项目目录中创建 SCSS 和 CSS 文件夹。另外，在 SCSS 目录中添加 style.scss 文件，在 CSS 目录中添加 style.css 文件。
这是项目目录结构。
步骤 6 - 现在在 style.scss 文件中添加以下 SASS 代码。
$height: 45rem;
$border: 2px, solid, blue;
div {
height: $height;
border: $border;
border-radius: 1rem;
}
步骤 7 - 现在，在终端中运行以下命令以编译 SCSS 代码。
npm run scss
步骤 8 - 它将在 style.css 文件中生成以下输出代码。如果没有，请在脚本运行时更改 scss 文件的代码。
div {
height: 45rem;
border: 2px, solid, blue;
border-radius: 1rem;
}
现在，每当用户更改 style.scss 文件时，style.css 文件中的输出也会发生更改。
为什么我们使用 SASS 而不是 CSS？
与 CSS 相比，使用 SASS 有很多好处。
变量 - Sass 允许我们创建变量，这可以简化 CSS 代码并降低复杂性。例如，我们可以定义一个 backgroundColor 变量并为其赋值。之后，我们可以使用变量贯穿整个代码，而不是硬编码的颜色值。
Mixin - Sass 允许我们定义 mixin，它们是可重用的代码块，就像我们在代码其他部分可以使用的函数一样。
嵌套 - Sass 允许我们将 CSS 选择器彼此嵌套，使我们的代码更有条理且更易于阅读。例如，我们可以将 ul 选择器嵌套在 nav 选择器中以设置导航菜单的样式。
导入 - 我们可以在 SASS 中创建部分 SCSS 文件并将它们导入到其他 SCSS 文件中，将不同组件的代码分解到单独的文件中。
300 次浏览
