3.sass的数据类型与函数

来源:互联网 时间:2017-12-08

数据类型

在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-of(rgb(255,0,0) -> color

type-of(#333) -> color


number 计算

2+9 -》10

2*8 -》16

(8/2) ->4 //除法要写括号

也可以包含单位

5px + 5px -> 10px

5px -2 ->3px

5px *2 ->10px

5px * 2px ->10px*px //这样就不对了哟

(10px/2px) -> 5//除法单位取消

3+2*5px->13px

好吧,都是一些小学的数学题,很简单对吧

处理数字的函数

绝对值

abs(10) -> 10;

abs(10px) -> 10px;

abs(-10px) -> 10px;

四舍五入相关

round(3.4)->3 //四舍五入

round(3.6)->4

ceil(3.2)->4 //向上取整

ceil(3.6)->4

floor(3.2)->3 //向下取整

floor(3.9)->3

percentage(600px/1000px) ->65% //百分之

min(1,2,3) -> 1 //最小值

max(2,3,4,5) -> 5 //最大值


字符串相关

//带引号和不带引号的字符串想加为带引号的字符串

"a" + b ->"ab"

a + "b" ->"ab"

//字符串+数字

"ab" + 1 ->"ab1"

//字符串 - 和 / 字符串

"a" - b ->"a-b"

"a" / b ->"a/b"

//注意字符串不能相乘


字符串函数

大写:

$word:"hello";

to-upper-case($word) -> "HELLO"

小写:

$word:"Hello";

to-lower-case($word) -> "hello"

得到length:

$word:"Hello";

str-length($word) -> 5

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

$word:"Hello";

str-index($word,"el") -> 2

字符串中插入字符串:

$word:"Hello";

str-insert($word,"aa",2) -> "Haaello"


颜色相关

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

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

例如:

body {

background-color:hsl(0,100%,50%);

}

-》

body {

background-color: red;

}

body {

background-color:hsl(60,100%,50%);

}

-》

body {

background-color: yellow;

}

也可以有透明哟

body {

background-color:hsl(60,100%,50%,0.5);

}

-》

body {

background-color: rgba(255,255,0,0.5);

}


颜色函数

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

$color:#ff0000;

$light-color:lighten($color,30%);

$dark-color:darken($color,30%);

.a{

color:$color;

background:$light-color;

border-color:$dark-color;

}

---》

.a {

color: #ff0000;

background: #ff9999;

border-color: #660000;

}

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

$color:hsl(0,50%,50%);

$saturate-color:saturate($color,50%);

$desaturate-color:desaturate($color,30%);

.a{

color:$color;

background:$saturate-color;

border-color:$desaturate-color;

}

--》

.a {

color: #bf4040;

background: red;

border-color: #996666;

}

用transparentize来让颜色更透明

用opatify来让颜色更不透明

$color:rgba(255,0,0,0.5);

$opacify-color:opacify($color,0.3);

$transparentize-color:transparentize($color,0.3);

.a{

color:$color;

background:$opacify-color;

border-color:$transparentize-color;

}

---》

.a {

color: rgba(255, 0, 0, 0.5);

background: rgba(255, 0, 0, 0.8);

border-color: rgba(255, 0, 0, 0.2);

}


列表类型

在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:(light:#ffffff,dark:#000000);

//获取map 的length

length($color) ->2

//得到map里key对应的值

map-get($color,dark) ->#000000

获取map里的所有键的列表

map-keys($color) ->("light","dark") //列表类型

获取map里的所有值的列表

map-values($color) -> ("#ffffff","#000000") //列表类型

判断map里是否含有这个key

map-has-key($color,light) ->true

给map里添加键值对

map-merge($color,(light-gray:#cccccc))

->(light:#ffffff,dark:#000000,light-gray:#cccccc)

移除map里的某个键值对

map-remove($colors,light) ->(dark:#000000,light-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:"info";

$attr:"border";

.alert-#{$name}{

#{$attr}-color:red;

}

---->

.alert-info {

border-color: red;

}

相关阅读:
Top