从零开始学习 SASS：安装、配置及基础语法

SASS 是一种 CSS 预处理器，它可以让我们在编写 CSS 时使用变量、嵌套、函数等高级特性，让 CSS 编写更加方便、快捷、易于维护。本文将介绍如何从零开始学习 SASS，包括安装、配置及基础语法。

安装

SASS 的安装有两种方式：使用 Ruby 安装和使用 Node.js 安装。这里我们选择使用 Node.js 安装。

1. 安装 Node.js

首先需要在电脑上安装 Node.js，可以从官网下载安装包进行安装。

1. 安装 SASS

打开终端（Windows 用户可以使用 Git Bash 或者 PowerShell），输入以下命令进行 SASS 的安装：

npm install -g sass

配置

安装完成后，我们需要配置 SASS 的编译环境，使其能够将 SASS 文件编译成 CSS 文件。这里我们使用 VS Code 作为代码编辑器。

1. 安装插件

打开 VS Code，进入插件商店，搜索并安装 "Live Sass Compiler" 插件。安装完成后，重启 VS Code。

1. 配置插件

打开 VS Code 的设置（快捷键：Ctrl + ,），在搜索框中输入 "live sass compiler"，找到 "Live Sass Compiler: Settings"，点击 "Edit in settings.json"。在打开的文件中添加以下配置：

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
    }
]

这里我们将编译后的 CSS 文件保存在项目根目录下的 css 文件夹中。

基础语法

变量

SASS 允许我们定义变量来存储颜色、字体、大小等属性值。变量以 "$" 开头，例如：

$primary-color: #3498db;
$font-size: 16px;

在后面的样式中，可以使用变量来代替属性值，例如：

h1 {
  color: $primary-color;
  font-size: $font-size;
}

嵌套

SASS 允许我们使用嵌套来组织样式，让代码更加清晰易读。例如：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        padding: 5px;
        &:hover {
          background-color: $primary-color;
          color: #fff;
        }
      }
    }
  }
}

混合

SASS 允许我们使用混合来定义一组样式，然后在需要使用的地方进行调用。混合以 "@" 开头，例如：

@mixin button($background-color, $color) {
  display: inline-block;
  padding: 10px 20px;
  background-color: $background-color;
  color: $color;
  border-radius: 5px;
  &:hover {
    background-color: darken($background-color, 10%);
  }
}

.btn-primary {
  @include button($primary-color, #fff);
}

.btn-secondary {
  @include button(#ccc, #333);
}

继承

SASS 允许我们使用继承来重用样式。例如：

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  @extend .btn;
  background-color: $primary-color;
  color: #fff;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

.btn-secondary {
  @extend .btn;
  background-color: #ccc;
  color: #333;
}

运算

SASS 允许我们使用运算符进行数值计算。例如：

.container {
  width: 100% / 3;
}

函数

SASS 内置了许多函数，可以帮助我们进行颜色、数值等的处理。例如：

.btn-primary {
  background-color: lighten($primary-color, 10%);
  color: complement($primary-color);
}

总结

本文介绍了 SASS 的安装、配置及基础语法，包括变量、嵌套、混合、继承、运算和函数等。SASS 可以让我们在编写 CSS 时更加方便、快捷、易于维护，是前端开发中必不可少的技能之一。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a6c35eb4cecbf2df9b1ac