Aug 17th

Sass

Sass用法总结

Sass作为CSS的预处理器，对CSS扩展允许使用更多的逻辑来编写样式，让样式代码可读性更高，功能更强大。
Sass最为常用的嵌套、嵌套属性、变量、@import 就省略，总结一下其他更高级的用法和平时少用被忽略的一些用法。

常用指令

@extend继承

用继承，可以多选择器共享同一套基础样式，如：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

编译后：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

@debug和@warn

@debug指令打印出SassScript表达式的值，类似Js中的console.log()，有助于debug
@warn指令，当样式库被使用不当时，打印出警告信息

控制指令

@if、@else、@else if、@for、@each、@while这五个控制指令基本类似Js中条件语句及循环语句，基本用法如下：

条件语句

@if、@else、@else if:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译后：

1 2	p { color: green; }

循环语句

@for:

1
2
3

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

@each

1
2
3

@each $i in 1, 2, 3 {
  .item-#{$i} { width: 2em * $i; }
}

$i: 1;
@while $i < 3 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i + 1;
}

编译后均为：

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

Mixin指令

使用Mixin可以定义可重用的代码块，可指定参数与缺省值，用@include指令调用定义的mixin,如：

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译后：

1
2
3

a {
  color: blue;
  background-color: red; }

定义的minxin内部可以调用其他minxin，但不能调用自己

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

minxin可设定变量缺省值，使用时根据需要加入参数，如下：

@mixin icolor($color: blue){
  background: $color;
}
.container {
  @include icolor(red);
}
.wrapper{
  @include icolor();
}

编译后：

.container {
  background: red; }
.wrapper {
  background: blue; }

minxin可设定可变参数，如：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后为：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }

@content指令

调用mixin时，定义的样式会在@content的位置，如：

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

编译后：

.colors {
  background-color: blue;
  color: white;
  border-color: blue; }

SassScript

SassScript可以被用在任何属性值中，允许属性使用变量、算术、函数。

SassScript支持六种主要的数据类型：

数字（如果1.2、13、10px）
文本字符串，无论是否有引号（例如 “foo”、’bar’、baz）
颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
布尔值（例如 true、false）
空值（例如 null）
值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）
maps 键值对（例如 (key1: value, key2: value2)）

运算

所有数据类型都支持等式运算：== 和 !=
数字支持的标准运算：加 +、减 -、乘 *、除 /和取模%，关系运算：<,>,<=,>=
布尔值支持布尔运算：and、or和not
圆括号可改变运算顺序

除法运算和/，三种情况下/会被解释为除法运算：

1. 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
1. 如果数值被圆括号包围。

如果数值是另一个数学表达式的一部分。
如：

p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

编译后：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

在纯CSS种使用变量和/，可以用#{}包住变量

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译后：

1 2	p { font: 12px/30px; }

Sass的一些常用函数

1. 颜色函数

rgba($color, $alpha)

用纯CSS写颜色透明度总需要把16进制色值转换成10进制，用rgba($color, $alpha)函数就不用手动换算了。

1 2	rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

ie_hex_str($color)

转换为IE filters 理解的颜色格式

1	ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00

2. 数字函数

percentage($number)

将无单位数字转换为百分比

round($number)

将$number四舍五入

1	round(1.4em) => 1em //可带单位

ceil($string)、floor($number)

向上取整、向下取整

random([$limit])

返回一个随机数:
random() 返回0到1的随机数；
random($limit)返回1到$limit的随机数

3. 字符串函数

unquote($string)、quote($string)

给字符串去掉、添加引号

1 2	unquote("foo") => foo quote(foo) => "foo"

str-length($string)

返回字符串的字符数

1	str-length("foo") => 3

to-upper-case($string)、to-lower-case($string)

将字符串转换为大写/小写

3. list函数

Lists在Sass里是不能改变的，所有的list函数都是返回一个新的list，所有list函数同样适用于maps

length($list)

返回$list的长度

nth($list, $n)、set-nth($list, $n. $value)

nth($list, $n) 返回$list的第$n项
set-nth($list, $n. $value) 替换$list的第$n项为$value

join($list1, $list2, [$separator])

将两个列表合并为1个，$separator: comma用逗号分隔；$separator: space用空格分隔

index($list, $value)

返回$value在$list中的位置

list-separator($list)

返回$list的分隔符

4. map函数

Maps在Sass中不可更改，所有map函数都会返回一个新的map

map-get($map, $key)

返回map中key 为$key的值

map-merge($map1, $map2)

将两个map合并成一个新的map，$map2中的key比$map1中的优先级高

1	map-merge(("foo": 1, "bar": 3),("bar": 2)) => ("foo": 1, "bar": 2)

map-remove($map, $keys…)

移除$map中key值为$key…的项，如：

1	map-remove(("foo": 1, "bar": 2, "baz": 3), "bar", "baz") => ("foo": 1)

map-keys($map)、map-values($map)

map-keys($map) 返回一个包含$map所有key 的list
map-values($map) 返回一个包含$map所有value 的list

1 2	map-keys(("foo": 1, "bar": 2)) => "foo", "bar" map-values(("foo": 1, "bar": 2, "baz": 1)) => 1, 2, 1

5. Introspection 函数

call($name, $args…)

动态调用一个Sass函数

1 2	call(rgb, 10, 100, 255) => #0a64ff call(scale-color, #0a64ff, $lightness: -10%) => #0058ef

6. Miscellaneous函数

Miscellaneous 函数称为三元条件函数

if($condition, $if-true, $if-false)

当条件$condition为true时，返回$if-true，当$condition为false时，返回$if-false

1 2	if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px

7. 自定义函数

当Sass提供的基本函数不满足需求时，可以像编写js函数一样自己编写函数，如简单的示例：

@function double($num) {
	@return $num1 * 2;
}
.container {
	width: double(100px);
}

插值`#{}`

用#{}在选择器或属性及属性值中插值，如：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译后：

1 2	p.foo { border-color: blue; }

SassScript中的`&`

&在SassScript中代表当前的父选择器，如：用mixin来检测是否存在父选择器

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

占位符选择器 `%`

用%代替#或.，结合@extend指令有助于写样式库，如：

content a%extreme {
	color: blue;
	font-weight: bold;
	font-size: 2em;
}
.notice	{
	@extend %extreme;
}

编译后

.content a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

常用指令

@extend继承

@debug和@warn

控制指令

条件语句

循环语句

Mixin指令

SassScript

运算

Sass的一些常用函数

1. 颜色函数

2. 数字函数

3. 字符串函数

3. list函数

4. map函数

5. Introspection 函数

6. Miscellaneous函数

7. 自定义函数

插值#{}

SassScript中的&

占位符选择器 %

插值`#{}`

SassScript中的`&`

占位符选择器 `%`