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

📅  最后修改于: 2022-05-13 01:56:49.875000             🧑  作者: Mango

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

在本文中,我们将讨论如何从命令行运行 SASS 代码。 SASS (Syntactically Awesome Style Sheet)是一个简单的 CSS 预处理器,它可以为网站创建可管理、独立于平台和可重用的样式表。它与每个版本的 CSS 完全兼容。 Sass 减少了 CSS 的重复,因此节省了时间。 SASS 不直接与 HTML 一起运行。因此,我们必须先将 SASS 转换为 CSS,然后才能在网页上使用它,我们可以使用 npm 包管理器的 SASS 包来做到这一点。

配置 SASS 以将其编译成 CSS:我们可以使用以下命令从 npm 安装最新版本的 SASS 包。在我们运行以下命令之前,必须在系统上安装 Node.js。详细安装过程请参考 Node.js NPM(Node Package Manager)。现在,运行以下命令以全局安装 SASS 编译器。

句法:

npm install sass -g

注意:如果由于权限问题导致安装过程出现问题,请以管理员身份运行命令提示符。

如果 SASS 仍然无法安装使用,请使用以下命令。

sudo npm install sass -g

此命令以超级用户权限将 SASS 全局安装到系统中。

将 SASS 预编译成 CSS:

要将 SASS 编译成 CSS,我们在命令提示符下使用以下命令。 sass 命令让我们可以将 SASS 文件预编译为基本的 CSS 文件。这有助于我们使用 SASS 编程编写模块化代码,并且仍然可以通过将 CSS 编译成传统的快速 CSS 来获得 CSS 的所有好处。

句法:

sass  [destination]

参数:它有以下参数。

  • source: SASS 文件的完整名称以及当前工作目录中的地址。
  • 目的地:所需 CSS 文件的完整名称以及当前工作目录中的地址。

示例 1:如果我们在当前工作目录中有一个文件 style.scss,并且我们想将它编译成一个 CSS 文件作为同一目录中的 style.css。我们使用以下命令:

sass style.scss style.css
style.scss
$color: green;
$font: "Times New Roman";
.container1 {
    font-family: $font;
}
.container2 {
    background-color: $color;
}


style.css
.container1 {
    font-family: "Times New Roman";
}
.container2 {
    background-color: green;
}


style.scss
$color1: blue;
$color2: red;
$font: 20px;
  
body {
    background-color: $color1;
    color: $color2;
    font-size: $font;
}


style.css
body {
    background-color: blue;
    color: red;
    font-size: 20px;
}


输出:

样式.css

.container1 {
    font-family: "Times New Roman";
}
.container2 {
    background-color: green;
}

示例 2:如果我们在另一个目录中有一个文件 style.scss(在本例中,它在“D:\Geeksforgeeks”中),而不是在当前目录中,我们希望将其编译为 CSS 文件作为样式。在同一目录下的css,我们可以使用以下命令:

sass D:\Geeksforgeeks\style.scss D:\Geeksforgeeks\style.css

样式.scss

$color1: blue;
$color2: red;
$font: 20px;
  
body {
    background-color: $color1;
    color: $color2;
    font-size: $font;
}

输出:

样式.css

body {
    background-color: blue;
    color: red;
    font-size: 20px;
}