SCSS 的基本语法

SCSS（Sassy CSS）是 Sass 的一种语法扩展，提供了更强大的功能和灵活性。以下是 SCSS 的基本语法详细讲解：

1. 变量

SCSS 允许你定义变量，使得样式更加灵活和可重用。

$primary-color: #3498db;
$padding: 10px;

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

2. 嵌套

SCSS 支持嵌套规则，便于结构化样式。

.nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}

3. 继承

可以通过 @extend 关键字共享样式，减少重复代码。

.placeholder {
  color: grey;
  font-style: italic;
}

.input {
  @extend .placeholder;
  border: 1px solid #ccc;
}

4. Mixins

Mixins 允许你创建可重用的样式块，并可以接收参数。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

5. 函数

SCSS 允许你定义函数，执行计算并返回值。

@function calculate-rem($size) {
  @return $size / 16 * 1rem;
}

body {
  font-size: calculate-rem(32px);
}

6. 条件语句与循环

使用 @if 和 @for 等语句实现条件逻辑和循环。

$breakpoint: 600px;

.button {
  @if $breakpoint > 500px {
    padding: 20px;
  } @else {
    padding: 10px;
  }
}

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

7. 导入

使用 @import 导入其他 SCSS 文件，实现模块化。

@import 'variables';
@import 'mixins';

body {
  color: $primary-color;
}

总结

SCSS 提供了变量、嵌套、继承、mixins、函数等强大功能，使得样式编写更加高效和灵活。掌握这些基本语法，可以帮助你更好地组织和管理 CSS 样式！