如何保存 SCSS 文件 - CSS

简介

Sass (Syntactically Awesome Style Sheets) 是一种CSS预处理器，它允许您使用更简洁、更易于维护的代码来编写样式表。 Sass 文件的扩展名是.scss，它与CSS文件非常相似，但Sass 语法比 CSS 更灵活。为了将 Sass 代码转换为浏览器可读的 CSS 代码，需要在服务器或本地计算机上安装 Sass 编译器。本文将教您如何保存Sass文件。

步骤

步骤 1：创建一个 Sass 文件

通过创建一个新文本文件并将其命名为“style.scss”（或任何您想命名的名称），来创建一个Sass文件。

// style.scss

$primary-color: #007bff;

body {
  font-family: sans-serif;
  color: $primary-color;
}

步骤 2：安装 Sass/SCSS 编译器

要安装 Sass 编译器，请按照您所在机器的指南执行下列步骤：

2.1 安装 Node.js 和 npm

安装 Node.js 并默认情况下会自动安装 npm。您可以在终端或命令提示符中输入以下命令来检查您是否已安装它们：

node -v
npm -v

2.2 使用 npm 安装 sass

接下来，您需要使用npm安装Sass。在终端或命令提示符中输入以下命令：

npm install -g sass

全局安装 Sass。

步骤 3：编译 Sass 文件

编译 Sass 文件的命令是：

sass input-file.scss output-file.css

将 'input-file.scss' 替换为您的 Sass 文件名（在此例中为“style.scss”）。

sass style.scss style.css

它会将生成的 CSS 代码存储为“style.css”文件。

您可以将编译命令用在您的构建流程中，以便自动编译 Sass 文件变化。

结论

在本文中，我们介绍了如何保存 Sass/SCSS 文件并使用 Sass 编译器将其转换为 CSS 文件。这可以极大地提高您的样式表的可读性和可维护性。