CSS 预处理神器 SCSS 入门简明指南，还需苦恼 Python 安装？

前端

2024-01-02 11:29:45

安装 SCSS 必备环境

Windows 系统

确保已安装 Node.js，版本建议在 14.16.0 以上。
使用命令提示符或 Windows PowerShell 终端，运行以下命令安装必要的软件包：
```
npm install -g node-sass
```

MacOS 系统

使用终端，运行以下命令安装必要的软件包：
```
brew install node
brew install sass/sass/sass
```

Linux 系统

确保已安装 Node.js，版本建议在 14.16.0 以上。

使用终端，运行以下命令安装必要的软件包：

sudo apt-get install nodejs
sudo apt-get install npm
npm install -g node-sass

编写 SCSS 代码

创建一个新的 .scss 文件，并使用您喜欢的文本编辑器打开它。例如，您可以使用 Visual Studio Code、Sublime Text 或 Atom。

/* 这是我的第一个 SCSS 文件 */

/* 定义一个变量 */
$primary-color: #336699;

/* 使用变量定义一个类 */
.my-class {
  color: $primary-color;
  font-size: 1.2rem;
}

编译 SCSS 代码为 CSS

在命令提示符或终端中，导航到包含您的 .scss 文件的目录。然后，运行以下命令编译您的 SCSS 代码：

sass --watch scss/main.scss:css/main.css

这将创建一个名为 main.css 的新 CSS 文件，其中包含编译后的 SCSS 代码。

常见的 SCSS 用法

变量

变量允许您在整个项目中存储和重用值。这有助于保持代码的组织性和可维护性。

/* 定义一个变量 */
$primary-color: #336699;

/* 使用变量定义一个类 */
.my-class {
  color: $primary-color;
  font-size: 1.2rem;
}

mixins

mixins 允许您创建可重用的代码块。这有助于保持代码的简洁性和可维护性。

/* 定义一个 mixin */
@mixin button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #336699;
  border-radius: 5px;
  color: #336699;
  text-decoration: none;
}

/* 使用 mixin */
.button-primary {
  @include button;
  background-color: $primary-color;
}

.button-secondary {
  @include button;
  background-color: #999999;
}

继承

继承允许您从一个类继承另一个类的样式。这有助于保持代码的组织性和可维护性。

/* 定义一个父类 */
.parent {
  color: #336699;
  font-size: 1.2rem;
}

/* 定义一个子类，继承父类的样式 */
.child {
  @extend .parent;

  /* 覆盖父类的 color 样式 */
  color: #999999;
}