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

• 还没有人评论，欢迎说说您的想法！