Sass / SCSS 样式速查备忘单

精选 Sass / SCSS 样式常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。精选 Sass 常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。这是 SASS 最有用功能的快速参考备忘单。

#Sass 基础

#入门介绍

文档 (sass-lang.com)
在 Y 分钟内学会 X (learnxinyminutes.com)

#变量 (Variables)

$defaultLinkColor: #46eac2;

a {
  color: $defaultLinkColor;
}

#字符串插值 (String interpolation)

$wk: -webkit-;

.rounded-box {
  #{$wk}border-radius: 4px;
}

#代码注释

/*
 块注释
 块注释
 块注释
*/

// 行注释

#混入 (Mixins)

@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}
h1 {
  @include heading-font;
}

参见：混入

#嵌套 (Nesting)

.markdown-body {
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

属性嵌套

text: {
  // 类似 text-align: center
  align: center;
  // 类似 text-transform: uppercase
  transform: uppercase;
}

#扩展 (Extend)

.button {
    ···
}

.push-button {
  @extend .button;
}

#@import 导入

@import './other_sass_file';
@import '/code', 'lists';

// 纯 CSS @imports
@import 'theme.css';
@import url(theme);

.sass 或 .scss 扩展名是可选的。

#Sass 混入

#参数 (Parameters)

@mixin font-size($n) {
  font-size: $n * 1.2em;
}

body {
  @include font-size(2);
}

#默认值 (默认值s)

@mixin pad($n: 10px) {
  padding: $n;
}

body {
  @include pad(15px);
}

#默认变量 (Default variable)

$default-padding: 10px;

@mixin pad($n: $default-padding) {
  padding: $n;
}

body {
  @include pad(15px);
}

#Sass 颜色函数

#rgba 颜色

rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)

#混合 (Mixing)

mix($a, $b, 10%)   // 10% a, 90% b

#修改 HSLA (Modifying HSLA)

darken($color, 5%)
lighten($color, 5%)

saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)

adjust-hue($color, 15deg)
complement($color)    // 类似 adjust-hue(_, 180deg)
invert($color)

fade-in($color, .5)   // 也称为 opacify()
fade-out($color, .5)  // 也称为 transparentize()
rgba($color, .5)      // 将 alpha 设置为 .5

#获取单个值 (Getting individual values)

HSLA 取值

hue($color)         // 0deg..360deg
saturation($color)  // 0%..100%
lightness($color)   // 0%..100%
alpha($color)       // 0..1（也称为 opacity()）

RGB 取值

red($color)         // 0..255
green($color)
blue($color)

参见：hue()、 red() 等颜色分量函数

#调整 (Adjustments)

// 按固定量更改
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) // darken(_, 30%)
adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)

// 通过百分比更改
scale-color($color, $lightness: 50%)

// 完全更改一个属性
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

支持：$red、$green、$blue、$hue、$saturation、$lightness、$alpha

#Sass 其他函数

#字符串 (Strings)

unquote('hello')
quote(hello)

to-upper-case(hello)
to-lower-case(hello)

str-length(hello world)
str-slice(hello, 2, 5)     // "ello" - 基于 1 的索引，不是基于 0 的
str-insert("abcd", "X", 1) // "Xabcd"

#单位 (Units)

unit(3em)        // 'em'
unitless(100px)  // false

#数字 (Numbers)

floor(3.5)
ceil(3.5)
round(3.5)
abs(3.5)

min(1, 2, 3)
max(1, 2, 3)

percentage(.5)   // 50%
random(3)        // 0..3

#其他 (Misc)

variable-exists(red)    // 检查 $red
mixin-exists(red-text)  // 检查 @mixin red-text
function-exists(redify)

global-variable-exists(red)

selector-append('.menu', 'li', 'a')   // .menu li a
selector-nest('.menu', '&:hover li')  // .menu:hover li
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)

#Sass 特性检查

#特性检查 (Feature check)

feature-exists(global-variable-shadowing)

#特性 (Features)

global-variable-shadowing（全局变量遮蔽）
extend-selector-pseudoclass（扩展选择器伪类）
units-level-3（CSS 三级单位）
at-error（@error 指令）

#Sass 循环

#For 循环

@for $i from 1 through 4 {
  .item-#{$i} {
    left: 20px * $i;
  }
}

#Each 循环（简单）

$menu-items: home about contact;

@each $item in $menu-items {
  .photo-#{$item} {
    background: url('#{$item}.jpg');
  }
}

#Each 循环（嵌套）

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

#While 循环

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

#Sass 其他特性

#条件语句 (Conditionals)

@if $position == 'left' {
  position: absolute;
  left: 0;
} @else if $position == 'right' {
  position: absolute;
  right: 0;
} @else {
  position: static;
}

#插值 (Interpolation)

.#{$klass} { ... }      // 类
call($function-name)    // 函数

@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

#列表 (Lists)

$list: (a b c);

nth($list, 1)  // 从 1 开始
length($list)

@each $item in $list { ... }

#映射 (Maps)

$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)

Sass / SCSS 样式 速查备忘单