SASS (SCSS) 速查表

SASS（Syntactically Awesome Stylesheets）是一种CSS预处理器，它使你能够编写更易于管理和更整洁的CSS代码，具有变量、嵌套和混合等功能。它的语法变体更接近标准CSS，只是增加了增强样式表效率的附加功能。

目录

1. 变量
2. 嵌套
3. 注释
4. 混合宏
5. 继承
6. 导入和使用
7. 颜色函数
8. 数学函数
9. 字符串和变量
10. 列表和映射
11. 条件语句
12. 循环
13. 函数
14. 媒体查询
15. 选择器插值
16. 部分文件和导入

变量

变量存储可重用的值，如颜色、字体大小和间距。它们有助于保持一致性并使更新更容易。

$primary-color: #333;
$font-size: 16px;

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

嵌套

SASS允许嵌套选择器以反映HTML结构。这提高了样式表的可读性和组织性。

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

注释

SASS支持块注释（/* */）和行注释（//）。块注释会出现在输出中，而行注释则不会。

/* 块注释 */
body {
  color: #333;
}

// 行注释

混合宏

混合宏允许创建带有参数的可重用CSS代码块。它们有助于减少代码重复并实现动态样式。

基本混合宏

定义可在任何地方包含的可重用样式。对于border-radius或box-shadow等属性很有用。

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

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

带参数的混合宏

接受参数以应用动态值。它增强了不同元素的灵活性和自定义能力。

@mixin font-size($size) {
  font-size: $size;
}

body {
  @include font-size(16px);
}

继承

使用@extend允许选择器之间共享样式。这减少了冗余并保持一致性。

.button {
  background: blue;
}

.primary-button {
  @extend .button;
}

导入和使用

@use和@import通过包含外部SASS文件帮助模块化样式。这提高了可维护性。

@use 'styles/colors'; // 导入并加载一个Sass文件

颜色函数

使用内置函数如lighten()、darken()和rgba()修改颜色。对于主题定制很有用。

$color: rgb(100, 120, 140);
$translucent-color: rgba($color, 0.5);
$light-blue: lighten($color, 10%);
$dark-blue: darken($color, 10%);

数学函数

在SASS中使用+、-、*和/进行计算。对于动态布局和尺寸调整很有用。

$width: 100px + 20px; // 120px
$half-width: $width / 2;
$perimeter: 2 * ($width + $height);

字符串和变量

使用to-upper-case()等函数操作文本。对于动态定义和格式化内容很有用。

$greeting: "Hello, world!";
$uppercase: to-upper-case($greeting); // "HELLO, WORLD!"

列表和映射

以结构化格式存储多个值。列表是有序的，而映射存储键值对用于样式设置。

列表

按顺序保存多个值。用于循环中动态应用样式。

$colors: red, green, blue;
@each $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

映射

为结构化样式定义键值对。对于颜色主题和设计系统非常理想。

$color-map: (color1: red, color2: blue);
@each $key, $color in $color-map {
  .#{$key}-text {
    color: $color;
  }
}

条件语句

条件语句用于使用if else条件控制样式流程。

@mixin border-style($val) {
    @if $val == light {
        border: 1px solid black;
    }
    @else if $val == medium {
        border: 3px solid black;
    }
    @else {
        border: none;
    }
}
.box {
    @include border-style(medium);
}

循环

遍历列表或数字以动态生成样式。节省时间并减少手动重复。

@for 循环

在特定范围内运行循环，对于网格布局和响应式设计很有用。

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

@each 循环

遍历列表或映射以根据预定义值应用样式。

@each $item in red, green, blue {
  .#{$item}-text {
    color: $item;
  }
}

@while 循环

当条件为真时重复代码块。对于动态计算很有用。

$i: 10;
@while $i > 0 {
  .item-#{$i} {
    width: $i * 10px;
  }
  $i: $i - 2;
}

函数

检索lightness()、red()和rgba()等值。有助于颜色操作和样式调整。

$color: rgba(100, 150, 200, 0.7);
red($color); // 返回颜色的红色分量
lightness($color); // 返回颜色的亮度

媒体查询

使用变量定义断点和响应式设计。允许针对不同屏幕尺寸进行动态缩放。

$tablet: 768px;
@media (max-width: $tablet) {
  body {
    font-size: 14px;
  }
}

选择器插值

使用变量动态生成类名。对于基于组件的设计中的动态样式很有用。

$color: red;
.#{$color}-text {
  color: $color;
}

部分文件和导入

使用部分文件将样式拆分为更小的块：

// _colors.scss
$primary-color: #333;

// styles.scss
@use 'colors';
body {
  color: colors.$primary-color;
}