数据类型

在sass里有数字、字符串、列表、颜色等类型

在cmd里 输入

sass -i

就会进入到交互模式，输入的计算可以马上得到结果

type-of()可以用来得到数据类型，如：

type-of(5) -> number

注意数字类型的可以包含单位，如：

type-of(5px) -> number

字符串类型：

type-of(hello) -> string type-of('hello') -> string

list类型：

type-of(1px solid red) -> list type-of(5px 10px) -> list

颜色：

type-of(red) -> color type) -> color type-of(#333) -> color

number 计算

》16 (

也可以包含单位

5px + 5px -> 10px 5px 3px 5px 10px 5px * 2px ->10px*px //这样就不对了哟 （10px/2px） 5px->13px

好吧，都是一些小学的数学题，很简单对吧 处理数字的函数

绝对值

(10px) -> 10px; abs(-10px) -> 10px;

四舍五入相关

((((((600px/1000px) () ()

字符串相关

b ->"ab" a b

字符串函数

大写：

$wordto

小写：

$wordto

得到length：

$wordstr

得到字符串在字符串里的位置：

$wordstr) -> 2

字符串中插入字符串：

$wordstr) -> "Haaello"

颜色相关

在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL

分别表示的是 色相 0-360（deg） 饱和度 0-100% 明度 0-100%

例如：

body { background()》 body { backgroundred; }

body { background()》 body { backgroundyellow; }

也可以有透明哟

body { background(，》 body { background(); }

颜色函数

lighten函数和darken函数可以把颜色加深或减淡，即调整明度，第一个参数为颜色，第二个参数为百分比，例如：

$color:#ff0000; $light); $dark); .$color$light-color; border$dark-color; }

---》

.#ff0000#ff9999; border#

saturate和desaturate函数可以调整颜色的纯度

$color); $saturate); $desaturate); .$color$saturate-color; border$desaturate-color; }

--》

.#bf4040red; border#

用transparentize来让颜色更透明

用opatify来让颜色更不透明

$color); $opacify); $transparentize); .$color$opacify-color; border$transparentize-color; }

---》

.()(); border(); }

列表类型

在sass里，用空格或者逗号隔开的值就是列表类型
如：

1px solid red Courier,microsoft yahei

列表函数

sass里的列表类似与数组

获取列表的长度 length(5px 10x) 2 获取列表中的第几个元素 nth(5px 10px,2) 10px 获取一个元素在一个列表里的下标 index(1px solid red,solid) 2 给列表里加入新的元素 append(5px 10px,5px) 5px 10px 5px 连接两个列表 join(5px 10px,5px 0) 5px 10px 5px 0

map类型

sass里的map类型类似与js里的object

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

map 函数

//定义一个map $color($color) map-get($color,dark) ->#000000 获取map里的所有键的列表 map) //列表类型 获取map里的所有值的列表 map) //列表类型 判断map里是否含有这个key map给map里添加键值对 map-merge($color,(light-gray:#cccccc)) ->(light:#ffffff,dark:#000000,light-gray:#cccccc) 移除map里的某个键值对 maplight-gray:#cccccc)

boolean类型

在sass里通过> < 比较得到的值就是布尔值 true 和false

5px>3px -> true 5px<2px -> false

在sass里也可以有或 且 非

且：

(5px > 3px) and (5px < 2px) -> false (5px > 3px) and (5px > 2px) -> true

或：

(5px > 3px) or (5px < 2px) -> true (5px < 3px) and (5px > 2px) -> false

非：

not(5px>3px) -> false

interpolation

在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值，例如

$name$attr.alert-#{$name}{ #red; }

---->

.alert-info { borderred; }