Sass 入门（一）基础语法介绍

在前端开发中，CSS 是不可避免的一部分，但是 CSS 语法相对简单，没有变量、函数、嵌套等特性，这使得 CSS 在开发过程中缺乏一些灵活性和可维护性。Sass 就是为了解决这些问题而生的，它是一种 CSS 预处理器，可以在 CSS 基础上添加变量、函数、嵌套等特性，提高 CSS 的可读性和可维护性。

安装 Sass

Sass 可以通过命令行进行编译，需要先安装 Sass。安装 Sass 可以使用 npm，运行以下命令：

npm install -g sass

Sass 基础语法

变量

在 Sass 中，可以使用 $ 符号定义变量，例如：

$primary-color: #333;

这样就定义了一个名为 $primary-color 的变量，它的值为 #333。

在 Sass 中使用变量，只需要在变量名前加上 $ 符号即可，例如：

body {
  color: $primary-color;
}

嵌套

在 Sass 中，可以使用嵌套语法来简化 CSS 的书写。例如：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    color: $primary-color;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

上面的代码中，ul、li、a 都是 nav 的子元素，使用嵌套语法可以使代码更加清晰。

混合器

在 Sass 中，可以使用混合器来定义一组样式，并在需要的地方进行调用。例如：

// javascriptcn.com 代码示例
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

上面的代码中，定义了一个名为 border-radius 的混合器，它接受一个参数 $radius，然后在 .box 中调用了这个混合器，并传入了参数 10px。

继承

在 Sass 中，可以使用继承语法来简化样式的书写。例如：

// javascriptcn.com 代码示例
.error {
  border: 1px solid red;
  color: red;
}

.warning {
  @extend .error;
  border-color: yellow;
}

上面的代码中，.warning 继承了 .error 的样式，并增加了 border-color 属性。

运算

在 Sass 中，可以进行简单的运算操作。例如：

.container {
  width: 100%;
  max-width: 960px / 2;
}

上面的代码中，.container 的 max-width 属性值为 480px。

总结

Sass 是一种 CSS 预处理器，可以在 CSS 基础上添加变量、函数、嵌套等特性，提高 CSS 的可读性和可维护性。本文介绍了 Sass 的基础语法，包括变量、嵌套、混合器、继承和运算。在实际开发中，可以根据项目需求灵活运用这些语法，提高开发效率和代码质量。

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