CSS SCSS 文档

SCSS (Sassy CSS) 是 Sass 的一个语法版本。Sass 是一种 CSS 的扩展语言，它增加了许多功能，如变量、嵌套、混合和函数，这些功能可以使 CSS 更加强大和维护性更强。

以下是一个简单的 SCSS 文档，介绍了其基本特性和用法：

 1. 变量

在 SCSS 中，你可以使用 $ 符号来定义变量。这使得你可以在多个地方重复使用相同的值，而不必每次都重新输入。

$font-size: 16px;
$primary-color: #3498db;

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

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

 2. 嵌套

SCSS 允许你嵌套选择器，这可以使你的代码更加整洁和有组织。

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

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}

3. 混合 (Mixins)

混合允许你定义可重复使用的 CSS 声明块。

@mixin button-styles($bg-color) {
  background-color: $bg-color;
  border: none;
  border-radius: 4px;
  color: white;
}

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

.button-secondary {
  @include button-styles(grey);
}

 4. 继承

使用 @extend，你可以继承另一个选择器的所有样式。 

.button {
  display: inline-block;
  padding: 10px 15px;
}

.button-round {
  @extend .button;
  border-radius: 50%;
}

 5. 函数

SCSS 提供了一些内置函数，如 lighten 和 darken，你也可以自定义函数。 

$base-color: #3498db;

.button {
  background-color: $base-color;
  &:hover {
    background-color: lighten($base-color, 10%);
  }
}

 6. 条件和循环

SCSS 支持条件语句和循环，这使得你可以根据条件生成样式或重复生成样式。

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}