sass中的数据类型
2019-09-26 本文已影响0人
最爱喝龙井
sass中的数据类型
sass中有多种数据类型,比如
number
、string
、list
、color
等等
那么我们就来测试以下,这些数据类型,在命令行输入
sass -i
,表示在终端打开sass环境,然后通过type-of(..)
来检测数据类型。
C:\Users\Administrator>sass -i
>> type-of(5)
"number"
>> type-of(hello)
"string"
>> type-of('hello')
"string"
>> type-of(1px solid #fff)
"list"
>> type-of(10px 10px)
"list"
>> type-of(#fff)
"color"
>> type-of(red)
"color"
>> type-of(rgb(0,0,0))
"color"
>>
number类型
在sass中,number类型的值可以做加减乘除的运算
C:\Users\Administrator>sass -i
>> 1+2
3
>> 4/2
4/2
>> (4/2)
2
>> 2*3
6
>> 1px + 2px
3px
>> 1px + 2
3px
>> 2px * 2px
4px*px
>> 2px * 2
4px
>> 4px/4px
4px/4px
>> (4px/4px)
1
>> (4px/4)
1px
>>
总结:在做带单位的运算的时候,后面的值最好不要带单位,在做除法运算的时候记得加上小括号
number类型当中的一些常用方法
C:\Users\Administrator>sass -i
>> abs(10px) //绝对值
10px
>> round(3.1)// 四舍五入
3
>> round(3.5)
4
>> ceil(3.1) // 向上取整
4
>> floor(3.5) // 向下取整
3
>> percentage(650px/1000px) //百分比
65%
>> min(1,2,3) // 最小值
1
>> max(1,2,3) //最大值
3
>>
string类型
string类型的数据可以进行加减除的运算,但是不能做乘法的操作
C:\Users\Administrator>sass -i
>> zhang + "hao"
"zhanghao"
>> "zhang" + hao
"zhanghao"
>> zhang - hao
"zhang-hao"
>> zhang/hao
"zhang/hao"
>> zhang*hao
SyntaxError: Undefined operation: "zhang times hao".
>>
string类型的数据的一些常用的方法
C:\Users\Administrator>sass -i
>> $str:'zhang hao'
"zhang hao"
>> $str
"zhang hao"
>> to-upper-case($str) // 大写
"ZHANG HAO"
>> to-lower-case($str) // 小写
"zhang hao"
>> str-length($str) // 长度
9
>> str-index($str 'zhang') // 索引,注意加逗号
SyntaxError: wrong number of arguments (1 for 2) for `str-index'
>> str-index($str, 'zhang')
1
>> str-insert($str, '.com', 10) //插入,参数分别是插入的目标字符,想要插入的字符,插入的位置
"zhang hao.com"
>>
颜色类型
颜色函数lighten、darken、rgb、hsl
例:
style.scss文件
$base-color: hsl(0, 100%, 30%);
$light-color: lighten($base-color, 30%);
$darken-color: darken($base-color, 30%);
.alert {
border: 1px solid $base-color;
background-color: $light-color;
color: $darken-color;
}
编译之后的style.css文件
.alert {
border: 1px solid red;
background-color: #ff9999;
color: #660000;
}