Sass 学习笔记 I

什么是 Sass？

Sass 是一种 CSS 预处理器，它允许开发者使用类似编程语言的方式编写 CSS。Sass 通过增加一些特性，如变量、嵌套、混合等，使得 CSS 更加易于维护和扩展。

安装 Sass

Sass 可以通过 RubyGems 安装，首先需要安装 Ruby。在命令行中输入以下命令：

gem install sass

Sass 基本语法

变量

Sass 中可以使用变量来存储值，例如：

$primary-color: #007bff;

body {
  background-color: $primary-color;
}

在编译后，上述代码会被转换为：

body {
  background-color: #007bff;
}

嵌套

Sass 允许将 CSS 规则嵌套在其他规则中，例如：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

在编译后，上述代码会被转换为：

// javascriptcn.com 代码示例
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

混合

Sass 中可以定义一个混合（Mixin），混合是一组 CSS 属性的集合，可以在其他规则中重复使用。例如：

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

.button {
  @include border-radius(5px);
}

在编译后，上述代码会被转换为：

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

继承

Sass 中可以使用继承（Extend）来复用 CSS 规则。例如：

// javascriptcn.com 代码示例
.alert {
  padding: 10px;
  border: 1px solid #ccc;
}

.success-alert {
  @extend .alert;
  border-color: green;
}

.error-alert {
  @extend .alert;
  border-color: red;
}

在编译后，上述代码会被转换为：

// javascriptcn.com 代码示例
.alert, .success-alert, .error-alert {
  padding: 10px;
  border: 1px solid #ccc;
}

.success-alert {
  border-color: green;
}

.error-alert {
  border-color: red;
}

总结

Sass 是一种强大的 CSS 预处理器，它可以使 CSS 更加易于维护和扩展。本文介绍了 Sass 的基本语法，包括变量、嵌套、混合和继承。通过深入学习 Sass，我们可以更加高效地编写 CSS，并减少代码的冗余和重复。

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