SCSS主要功能详解

SCSS（Sassy CSS）是CSS的一种扩展语言，它提供了一些高级写法和功能，使样式表更具灵活性和可维护性。本文将详细介绍SCSS的全部主要功能，并通过示例演示其用法。

1. 变量
SCSS允许使用变量来存储颜色、字体、尺寸等常用值，实现在整个样式表中重复使用。考虑以下示例：

$primary-color: #ff0000;
$font-size: 14px;

.header {
  background-color: $primary-color;
  font-size: $font-size;
}

.button {
  background-color: $primary-color;
}

在上面的代码中，我们定义了`$primary-color`和`$font-size`这两个变量，并在`.header`和`.button`选择器中使用它们。这样，我们在多处使用相同的颜色和字体大小时只需更新变量的值，而不需要逐个更新样式。

2. 嵌套规则
SCSS允许在一个选择器内嵌套另一个选择器，以减少代码的嵌套层级。考虑以下示例：

.container {
  width: 100%;
  padding: 20px;

  .header {
    font-size: 20px;
    color: #333;
  }

  .content {
    margin-top: 10px;

    p {
      line-height: 1.5;
    }
  }
}

在上面的代码中，我们嵌套了`.header`和`.content`选择器在`.container`选择器内。这样做不仅减少了嵌套的层级，还使代码更清晰易读。

3. 混合器（Mixins）
SCSS提供了混合器的功能，可以定义一组样式，并在需要的地方进行重用。考虑以下示例：

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.button {
  @include button-style(#ff0000, #ffffff);
}

.link-button {
  @include button-style(#00ff00, #000000);
}

在上面的代码中，我们定义了一个名为`button-style`的混合器，用于生成按钮样式。然后，我们在`.button`和`.link-button`选择器中使用了这个混合器，并传递了不同的参数来设置不同的按钮样式。

4. 继承
SCSS允许使用`@extend`关键字继承一个选择器的样式。考虑以下示例：

.button {
  padding: 10px;
  background-color: #ff0000;
  color: #ffffff;
}

.special-button {
  @extend .button;
  font-weight: bold;
}

在上面的代码中，`.special-button`选择器继承了`.button`选择器的样式，并添加了自己的样式。这样可以避免重复定义相同的样式，提高了代码的可维护性。

5. 条件语句
SCSS支持使用`@if`、`@else if`和`@else`关键字实现条件语句。考虑以下示例：

$size: 10px;

.element {
  @if $size > 15px {
    font-size: 20px;
  } @else if $size > 10px {
    font-size: 16px;
  } @else {
    font-size: 12px;
  }
}

在上面的代码中，我们根据`$size`变量的值，使用条件语句设置了不同的`font-size`样式。

6. 循环
SCSS支持使用`@for`和`@each`关键字实现循环。考虑以下示例：

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

$colors: #ff0000, #00ff00, #0000ff;

@each $color in $colors {
  .color-#{$color} {
    background-color: $color;
  }
}

在上面的代码中，我们使用`@for`循环生成了`.item-1`、`.item-2`和`.item-3`选择器，并根据循环变量设置了不同的宽度。同时，我们使用`@each`循环遍历了`$colors`列表，并生成了对应的颜色选择器。

7. 父级选择器
SCSS允许使用`&`符号引用父级选择器。考虑以下示例：

.button {
  background-color: #ff0000;

  &:hover {
    background-color: #00ff00;
  }
}

在上面的代码中，当鼠标悬停在`.button`选择器上时，我们使用`&`引用了父级选择器，生成了`.button:hover`选择器，并设置了不同的背景颜色。

8. 占位选择器（Placeholder Selector）
SCSS允许使用`%`符号定义一个占位选择器，可以在需要时通过`@extend`引用。占位选择器不会生成实际的CSS代码，只有在被引用时才会生成对应的样式。考虑以下示例：

%button-style {
  padding: 10px;
  background-color: #ff0000;
  color: #ffffff;
}

.button {
  @extend %button-style;
}

.special-button {
  @extend %button-style;
  font-weight: bold;
}

在上面的代码中，我们定义了一个名为`button-style`的占位选择器，并在`.button`和`.special-button`选择器中使用了`@extend`引用。这样可以避免重复定义相同的样式，提高了代码的可维护性。

9. 函数
SCSS提供了许多内置的函数，例如颜色处理、字符串处理等。通过使用这些函数，可以对样式进行更灵活的处理。考虑以下示例：

$primary-color: #ff0000;

.header {
  background-color: darken($primary-color, 10%);
}

.footer {
  color: lighten($primary-color, 20%);
}

在上面的代码中，我们使用了`darken`和`lighten`函数对颜色进行处理，实现了背景颜色的加深和文字颜色的变亮。

10. 导入
SCSS允许使用`@import`关键字导入其他SCSS或CSS文件。通过导入，可以将样式表分割成多个文件，提高代码的可维护性。考虑以下示例：

@import "variables";
@import "buttons";
@import "layout";

在上面的代码中，我们使用`@import`导入了`variables.scss`、`buttons.scss`和`layout.scss`这三个文件，将样式表分割成了多个模块。

11. 运算操作
SCSS允许对数值进行加减乘除等运算。通过运算操作，可以动态计算样式的值。考虑以下示例：

$base-size: 16px;

.header {
  font-size: $base-size * 1.5;
}

.footer {
  font-size: $base-size / 2;
}

在上面的代码中，我们使用了乘法和除法运算，根据`$base-size`变量的值动态计算了`.header`和`.footer`选择器的字体大小。

12. 注释
SCSS支持单行注释（//）和多行注释