这是一份快速参考备忘单，列出了 SASS 最有用的功能
Sass 基础
介绍
Sass 是一种 CSS 的预编译语言
在 Node.js 环境中使用 Sass
1
2
3
| $ sass source/index.scss build/index.css
$ sass --watch input.scss output.css
$ sass --watch app/sass:public/css
|
变量
1
2
3
4
| $defaultLinkColor: #46EAC2;
a {
color: $defaultLinkColor;
}
|
字符串插值
1
2
3
4
| $wk: -webkit-;
.rounded-box {
#{$wk}border-radius: 4px;
}
|
注释
Extend
1
2
3
4
5
6
| .button {
···
}
.push-button {
@extend .button;
}
|
嵌套(Nesting)
1
2
3
4
5
6
7
8
9
10
| nav {
ul {
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
}
}
|
编译 css 为：
1
2
3
4
5
6
7
8
9
10
| nav ul {
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
}
|
模块（片段）
1
2
3
|
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
|
注意以下划线开头的 Sass 文件
1
2
3
4
5
6
7
|
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
|
编译 css 为：
1
2
3
4
| .inverse {
background-color: #333;
color: white;
}
|
混合(Mixins)
1
2
3
4
5
6
7
| @mixin heading-font {
font-family: sans-serif;
font-weight: bold;
}
h1 {
@include heading-font;
}
|
查看: 混合(Mixins)
@import
1
2
3
4
5
| @import './other_sass_file';
@import '/code', 'lists';
@import "theme.css";
@import url(theme);
|
.sass 或 .sass 扩展名是可选的。
Sass 混合(Mixins)
参数
1
2
3
| @mixin font-size($n) {
font-size: $n * 1.2em;
}
|
1
2
3
| body {
@include font-size(2);
}
|
默认值
1
2
3
| @mixin pad($n: 10px) {
padding: $n;
}
|
1
2
3
| body {
@include pad(15px);
}
|
默认变量
1
2
3
4
5
6
7
| $default-padding: 10px;
@mixin pad($n: $default-padding) {
padding: $n;
}
body {
@include pad(15px);
}
|
Sass 颜色函数
rgba
1
2
3
| rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)
|
Mixing
修改 HSLA
1
2
| darken($color, 5%)
lighten($color, 5%)
|
1
2
3
| saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)
|
1
2
3
| adjust-hue($color, 15deg)
complement($color)
invert($color)
|
1
2
3
| fade-in($color, .5)
fade-out($color, .5)
rgba($color, .5)
|
获取值
HSLA
1
2
3
4
| hue($color)
saturation($color)
lightness($color)
alpha($color)
|
RGB
1
2
3
| red($color)
green($color)
blue($color)
|
| :- |
:- |
color.red() |
用于获取颜色的红色通道 |
color.green() |
用于获得颜色的绿色通道 |
color.blue() |
用于获取颜色的蓝色通道 |
color.hue() |
以获得颜色的色调 |
color.saturation() |
用于获得颜色的饱和度 |
color.lightness() |
以获得颜色的亮度 |
另见: hue(), red()
Sass 内置了对颜色值的支持
1
2
3
4
| @debug rgb(204, 102, 153);
@debug rgba(107, 113, 127, 0.8);
@debug hsl(228, 7%, 86%);
@debug hsla(20, 20%, 85%, 0.7);
|
调整
1
2
3
4
5
6
7
8
9
10
|
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%)
adjust-color($color, $alpha: -0.4)
adjust-color($color, $hue: 30deg)
scale-color($color, $lightness: 50%)
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)
|
支持的: $red, $green, $blue, $hue, $saturation, $lightness, $alpha
Sass 其他函数
字符串
1
2
| unquote('hello')
quote(bold);
|
1
2
| to-upper-case(hello)
to-lower-case(hello)
|
1
2
3
4
| str-length(hello world)
str-slice(hello, 2, 5)
str-insert("abcd", "X", 1)
|
Numbers
1
2
3
4
| floor(4.2)
ceil(4.2)
round(4.2)
abs(-10px)
|
1
2
3
| min(1px, 4px)
$widths: 50px, 30px, 100px
@debug math.min($widths...) // 30px
|
1
2
| percentage(.5)
random(3)
|
Units
1
2
| unit(3em)
unitless(100px)
|
Units
1
2
| unit(3em)
unitless(100px)
|
Misc
1
2
3
4
5
|
variable-exists(red)
mixin-exists(red-text)
function-exists(redify)
|
1
| global-variable-exists(red)
|
1
2
3
4
5
6
7
8
|
selector-append('.menu', 'li', 'a')
selector-nest('.menu', '&:hover li')
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)
|
Sass 功能检查
功能检查
1
2
| meta.feature-exists($feature)
feature-exists($feature)
|
1
2
3
4
5
6
7
8
9
| @mixin debug-content-exists {
@debug meta.content-exists();
@content;
}
@include debug-content-exists;
@include debug-content-exists {
}
|
功能
| :- |
:- |
global-variable-shadowing # |
这意味着局部变量将隐藏全局变量，除非它具有 !global 标志 |
extend-selector-pseudoclass # |
这意味着 @extend 规则将影响嵌套在伪类中的选择器，如 :not() |
units-level-3 # |
这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位 |
at-error # |
这意味着支持 @error 规则 |
custom-property # |
这意味着自定义属性声明值不支持除插值之外的任何表达式 |
Sass 循环
For 循环
1
2
3
4
5
6
7
| $base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}
|
编译 css 为：
1
2
3
4
5
6
7
8
9
10
11
| ul:nth-child(3n + 1) {
background-color: #004080;
}
ul:nth-child(3n + 2) {
background-color: #004d99;
}
ul:nth-child(3n + 3) {
background-color: #0059b3;
}
|
Each 循环（简单）
1
2
3
4
5
6
7
8
| $sizes: 40px, 50px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
}
}
|
编译 css 为：
1
2
3
4
5
6
7
8
9
| .icon-40px {
font-size: 40px;
height: 40px;
}
.icon-50px {
font-size: 50px;
height: 50px;
}
|
Each 循环（嵌套）
1
2
3
4
5
6
7
8
9
| $icons: ("eye": "\f112", "start": "\f12e");
@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}
|
编译 css 为：
1
2
3
4
5
6
7
8
9
10
| .icon-eye:before {
display: inline-block;
font-family: "Icon Font";
content: "";
}
.icon-start:before {
display: inline-block;
font-family: "Icon Font";
content: "";
}
|
While 循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| @use "sass:math";
@function scale-below($value, $base, $ratio: 1.618) {
@while $value > $base {
$value: math.div($value, $ratio);
}
@return $value;
}
$normal-font-size: 16px;
sup {
font-size: scale-below(20px, 16px);
}
|
编译 css 为：
1
2
3
| sup {
font-size: 12.36094px;
}
|
Sass 其它功能
条件句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| @mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: $size / 2;
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
|
编译 css 为：
1
2
3
4
5
6
7
8
9
10
| .square-av {
width: 100px;
height: 100px;
}
.circle-av {
width: 100px;
height: 100px;
border-radius: 50px;
}
|
插值
1
2
3
4
5
| .#{$klass} { ... }
call($function-name)
@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")
|
列表
1
2
3
4
| $list: (a b c);
nth($list, 1)
length($list)
@each $item in $list { ... }
|
Maps
1
2
| $map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1)
|
另见
