前端SCSS高级用法

1. @extend

@extend 用于让一个选择器继承另一个选择器的样式，减少代码重复。

.button {
  padding: 10px 20px;
  color: white;
  background-color: blue;
}

.primary-button {
  @extend .button;
  background-color: green;
}

2. 变量

使用变量存储重复使用的值，如颜色、字体大小等。

$primary-color: blue;
$padding: 10px;

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

3. 嵌套规则

允许以层次结构的方式组织CSS规则。

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

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $primary-color;

    &:hover {
      color: darken($primary-color, 10%);
    }
  }
}

4. 混合（Mixins）

定义可重复使用的代码块，可以接受参数。

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

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

5. 函数

支持自定义函数以执行复杂运算。

@function calculate-spacing($base, $multiplier) {
  @return $base * $multiplier;
}

.container {
  padding: calculate-spacing(10px, 2);
}

6. 控制指令

使用 @if, @else if, @else, @for, @each, @while 进行条件判断和循环。

@mixin respond-to($media) {
  @if $media == 'phone' {
    @media (max-width: 600px) { @content; }
  } @else if $media == 'tablet' {
    @media (max-width: 768px) { @content; }
  }
}

.container {
  @include respond-to('phone') {
    background-color: yellow;
  }
}

7. 导入（@import）

将样式拆分到多个文件中，提升代码的模块化和可维护性。

// main.scss
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';