SASS语法介绍

SASS是一种CSS的预处理器，它允许你使用类似编程语言的方式编写CSS代码，让样式表的开发更加高效和方便。本文将介绍SASS的主要语法和使用方法。

变量

在SASS中可以使用变量来存储数值、字符串和颜色值等，这些变量可以在其他地方进行引用和修改。

$primary-color: #f00;
$font-size: 16px;

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

嵌套规则

SASS中可以使用嵌套规则来编写样式，这样可以更加清晰的表达样式之间的层次关系。

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

    li {
      display: inline-block;
      margin-right: 10px;
      a {
        text-decoration: none;
        color: $primary-color;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

混合器

混合器是一种可重用的CSS代码块，可以传递参数和返回值。混合器可以用于编写样式的通用部分，比如布局、颜色等。

@mixin button($bg-color) {
  background-color: $bg-color;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

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

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

继承

SASS中的继承可以让一个选择器从另一个选择器那里继承样式，这样可以减少重复的样式代码。

.error {
  color: #f00;
  font-weight: bold;
}

.warning {
  @extend .error;
  color: #f90;
}

控制指令

SASS中还支持一些控制指令，包括if、for、while等，这些指令可以让样式表更加灵活和可控。

@if $primary-color == #f00 {
  body {
    color: #fff;
  }
} @else {
  body {
    color: #000;
  }
}

@for $i from 1 to 6 {
  h#{$i} {
    font-size: 16px + $i;
  }
}

$counter: 1;
@while $counter < 10 {
  .item-#{$counter} {
    width: $counter * 10%;
  }
  $counter: $counter + 1;
}

输出样式

在使用SASS编写样式之后，需要将它们转换成CSS样式，并输出到目标文件中。SASS支持通过命令行工具或SASS插件进行转换。

// 将样式文件转换成CSS文件
sass input.scss output.css

// 在Webpack中使用SASS插件
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

通过以上介绍，希望您能更好地了解SASS的语法和使用方法，提升您的CSS开发效率。