sass中的数据类型

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;
}