Sass学习笔记

条件控制语句

if

@if $type == 'tony' {
} @else if $type == 'ruby' {
}@else {}

for

• from … through … 包含 … 包含 …
• from … to … 包含 … 不包含 …
• from … through length($list) 遍历数组

while

$k: 6;
@while $k > 0 {
	.item#{$k} {
		height: 1px * $k;
	}
	$k:$k - 2;
}

each … in 遍历对象

内置对象

number

• percentage($number): 转换百分比
• round($number): 整数四舍五入
• ceil($number): 整数向上舍入
• floor($number): 整数向下舍入
• abs($number): 获取绝对值
• min($number, …): 比较最小值
• max($number, …):比较最大值
• random()获取随机数，可输入参数

list

• length($list): 获取数组长度
• nth($list, $n): 获取指定下标的元素
• index($list, $value): 获取指定元素的下标
• set-nth($list, $n, $value): 替换指定下标的元素
• join($list1, $list2): 拼接数组
• append($list, $value): 往数组添加元素

string

• unquote($string): 去除引号
• quote($string): 添加引号
• str-length($string): 获取字符串的长度
• str-insert($string, $insert, $index): 在指定位置插入字符
• str-index($string): 获取字符的下标
• to-upper-case($string): 转换成大写
• to-lower-case($string): 转换成小写

map

• map-get($map, $key):根据key，返回$map中相关的值
• map-merge($map1, $map2): 合并 返回新的map
• map-remove($map, $key): 删除key，返回新的map
• map-keys($map): 返回map中的所有key
• map-values($map): 返回map中所有的value
• map-has-key($map, $key): 根据key判断map中是否有相应地value值，有返回true，否则为false
• keywords($args): 返回一个函数的参数，参数可以动态设置

@mixin foo($args...){
	@debug keywords($args);
}

@include foo($name: 'xiaoming',$age:18);

function

$rem1: 100px;

@function toRem($px) {
	$rem2: 37.5px;

	@debug $px;
	@return ($px/$rem2) + rem;
}
.div {
	width: toRem($rem1);
}