scss的 用法。

SCSS（Sassy CSS）是Sass的一个语法格式，它是一个CSS预处理器，提供了许多有用的特性来增强和扩展标准CSS的功能。使用SCSS，你可以使用变量、嵌套规则、混合（Mixins）、继承等特性来编写更加动态和可维护的CSS代码。以下是SCSS的一些基本用法：

用法：

1. 变量（Variables）

在SCSS中，你可以定义变量来存储颜色、字体、或任何其他值。这使得你的CSS更加一致和可维护。

$primary-color: #3bbfce;
$margin: 16px;

body {
  color: $primary-color;
  margin: $margin;
}

2. 嵌套（Nesting）

SCSS允许你嵌套你的CSS选择器，这样可以使CSS结构更加清晰和紧凑。

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 混合（Mixins）

混合允许你创建可重用的代码块。你可以传递参数给混合，使其更加灵活。

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

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

4. 导入（Import）

SCSS提供了@import指令，让你可以将一个SCSS文件导入另一个文件中，这有助于将CSS规则分割成更小、更易于管理的片段。

// _reset.scss
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

// styles.scss
@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

5. 继承（Extend）

SCSS的@extend指令允许一个选择器继承另一个选择器的所有样式。这是一个强大的特性，可以帮助你保持DRY（Don't Repeat Yourself）。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

6. 条件语句

SCSS支持条件语句和循环，这让你可以根据特定条件应用样式，或者生成重复的样式。

@mixin theme($theme: Dark) {
  @if $theme == Dark {
    background-color: #000;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #000;
  }
}

body { @include theme(Dark); }

7.循环

循环在SCSS中主要通过@for、@each和@while指令实现。

@for循环

@for循环用于生成一系列样式规则。

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

@each循环

@each循环在一个列表或地图上迭代。

$colors: (red: #ff0000, green: #00ff00, blue: #0000ff);

@each $key, $color in $colors {
  .#{$key}-text { color: $color; }
}

这将为每种颜色生成一个文本颜色类。

@while循环

@while循环会一直运行，直到某个条件不再为真。

$i: 1;

@while $i <= 3 {
  .width-#{$i} { width: 100px * $i; }
  $i: $i + 1;
}

这将生成类似于@for循环的输出。

循环生成颜色

$border-list-colors: #ef8e18, #f3ffac, #8cffad;
$background-list-colors: rgba(239, 142, 24, 0.35), rgba(243, 255, 172, 0.35),
  rgba(140, 255, 173, 0.35);

@for $i from 1 through length($border-list-colors) {
  .listItem:nth-child(#{length($border-list-colors)}n + #{$i}) {
    border: 1px solid nth($border-list-colors, $i) !important;
    background-color: nth($background-list-colors, $i) !important;
  }
}

官方参考文档