3.sass的数据类型与函数
数据类型
在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;
}
posted on 2017-12-08 10:05 空一座旧城,守一个旧人 阅读(420) 评论(0) 编辑 收藏 举报