SASS控制指令和表达式

SASS（Syntactically Awesome Stylesheets）是一种CSS预处理器，它提供了比纯CSS更加强大的功能。其中最重要的就是控制指令和表达式。

控制指令

SASS提供了一些控制指令，可以在编译时控制CSS输出的方式。

@import

@import指令用于导入其它SASS文件。它可以引入一个SASS文件或一个CSS文件。

使用示例：

@import 'base';

@extend

@extend指令用于复用CSS规则。它可以将一组CSS规则继承到另一个规则中。

使用示例：

.btn {
  color: white;
  background-color: red;
  border: 1px solid black;
}

.btn-primary {
  @extend .btn;
  background-color: blue;
}

@if、@else if、@else

@if指令可以根据条件输出CSS规则。可以通过==、!=、<、>、<=、>=等比较运算符进行判断。

使用示例：

$color: red;

.btn {
  @if $color == red {
    color: white;
    background-color: red;
  }
  @else if $color == green {
    color: white;
    background-color: green;
  }
  @else {
    color: black;
    background-color: white;
  }
}

@for、@while

使用@for和@while指令可以实现循环操作。

使用示例：

@for $i from 1 to 5 {
  .item-#{$i} {
    width: #{$i}px;
  }
}

$i: 1;
@while $i < 5 {
  .item-#{$i} {
    width: #{$i}px;
  }
  $i: $i + 1;
}

表达式

SASS也支持表达式，可以进行数学运算、逻辑运算和字符串操作。

使用示例：

$width: 10px;
$padding: 5px;

.box {
  width: $width * 2;
  padding: $padding * 2;
  margin-top: $width / 2;
  color: if($width > 5, red, blue);
  content: quote('Hello, world!');
}

以上就是SASS的控制指令和表达式的介绍，希望对你有所帮助。