SASS操作示例

什么是SASS?

SASS（Syntactically Awesome Style Sheets）是一种CSS预处理器，它支持变量(variables)、嵌套(nesting)、mixin、继承等高级功能，让CSS编写更加简洁、灵活和可维护。

如何安装SASS?

在终端中输入以下命令：

npm install -g sass

基本语法

变量

用$开头定义变量，例如：

$primary-color: #333;

body {
  color: $primary-color;
}

嵌套

可以使用嵌套语法来减少代码量，并提高可读性：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

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

Mixin

Mixin允许将CSS样式应用于多个元素，并可以传递参数：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

继承

可以使用继承从一个选择器中继承样式：

.error {
  border: 1px solid #f00;
  color: #f00;
}

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

编译SASS

使用以下命令将SASS编译为CSS：

sass input.scss output.css

总结

SASS是一种强大的CSS预处理器，提供了更高级的功能来编写更高效的CSS代码。通过使用变量、嵌套、mixin、继承等特性，可以让我们的CSS开发更加方便快捷。