Sass-@-规则和指令

1. Sass规则

在Sass中，使用“@”符号来定义规则，这些规则被称为“Sass-@-规则”。以下是几个常见的Sass-@-规则：

@import

使用@import规则引入其他Sass文件:

@import 'base';

@extend

使用@extend规则继承样式:

.btn {
  border: 1px solid #ccc;
  padding: 10px;
}

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

@media

使用@media规则定义响应式布局:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

2. Sass指令

Sass指令是一种特殊类型的Sass规则，通过使用“@”符号后跟指令名称来定义。以下是几个常见的Sass指令：

@if

使用@if指令根据条件设置样式:

$bg-color: blue;

.btn {
  padding: 10px;
  @if $bg-color == blue {
    background-color: blue;
    color: #fff;
  }
}

@for

使用@for指令根据循环设置样式:

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100%;
    @media (min-width: 768px) {
      width: calc(100% / #{$i});
    }
  }
}

@while

使用@while指令循环设置样式:

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

@mixin

使用@mixin指令定义样式混合器:

@mixin box-sizing($value) {
  -moz-box-sizing: $value;
  -webkit-box-sizing: $value;
  box-sizing: $value;
}

.container {
  @include box-sizing(border-box);
}

@function

使用@function指令定义样式函数:

@function em($px, $base: 16px) {
  @return #{$px/$base}em;
}

.container {
  font-size: em(16px);
}

总结

通过学习Sass-@-规则和指令，你可以更加灵活地编写样式代码，避免了大量重复性的工作，提高了样式代码的重用性和可维护性。