SASS 入门教程：从安装到基础语法讲解

什么是 SASS

SASS 是一种 CSS 预处理器，它使得 CSS 的编写更加简单、易于维护和扩展。它提供了许多现代化的功能，如变量、嵌套规则、混合器、继承等，使得 CSS 的编写更加高效，同时也提高了代码的可读性和可维护性。

安装 SASS

在使用 SASS 之前，需要先安装它。SASS 可以通过 RubyGems 安装，因此需要先安装 Ruby。在安装 Ruby 后，可以使用以下命令安装 SASS：

gem install sass

安装完成后，可以通过以下命令检查 SASS 是否安装成功：

sass -v

如果显示了 SASS 的版本号，则说明安装成功。

基础语法

变量

SASS 允许使用变量来存储颜色、字体、尺寸等常用的属性值，以便在整个样式表中重复使用。变量以 $ 开头，后面跟着变量名和属性值：

$primary-color: #007bff;
$font-size: 16px;

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

嵌套规则

SASS 允许在 CSS 规则中嵌套其他规则，以便更好地组织代码。例如，可以将 :hover 伪类嵌套在父元素规则中：

// javascriptcn.com 代码示例
button {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

混合器

SASS 允许定义可重用的代码块，称为混合器。混合器以 @mixin 开头，后面跟着混合器名和代码块：

// javascriptcn.com 代码示例
@mixin button($bg-color) {
  background-color: $bg-color;
  color: #fff;
  padding: 10px 20px;
}

button {
  @include button($primary-color);
}

.btn-secondary {
  @include button(#6c757d);
}

继承

SASS 允许使用 @extend 关键字来继承其他规则的样式：

// javascriptcn.com 代码示例
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: all .15s ease-in-out;

  &-primary {
    background-color: $primary-color;
    border-color: $primary-color;

    &:hover {
      background-color: darken($primary-color, 10%);
      border-color: darken($primary-color, 10%);
    }
  }
}

.btn-secondary {
  @extend .btn;
  background-color: #6c757d;
  border-color: #6c757d;

  &:hover {
    background-color: darken(#6c757d, 10%);
    border-color: darken(#6c757d, 10%);
  }
}

总结

SASS 是一种强大的 CSS 预处理器，它提供了许多现代化的功能，如变量、嵌套规则、混合器、继承等，使得 CSS 的编写更加高效，同时也提高了代码的可读性和可维护性。在使用 SASS 时，需要先安装它，并熟悉其基础语法，如变量、嵌套规则、混合器、继承等。掌握这些基础知识后，可以更加高效地编写 CSS 样式表，提高工作效率。

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