sass学习8——内置函数

字符串函数

添加删除引号函数quote、unquote

.test5 {
    content: unquote('"hello sass"');
}

.test6 {
    content: quote(hellosass);
}

生成后：

image.png

注意啦：使用quote()函数增加只能给字符串增加双引号，且字符串中间有单引号或空格时，需要用单引号或双引号括起，否则编译将会报错。

同时quote()碰到特殊符号，如！、？、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器进行编译时也会报错。

数字函数

• percentage(value单位前后保持一致；
• round($value)：将数值四舍五入，转换成一个最接近的整数；
• ceil($value)： 将大于自己的小数转换成下一位整数；
• floor($value)：将一个数去除他的小数部分；
• abs($value)： 返回一个数的绝对值；
• min($numbers…)： 找出几个数值中的最小值；
• max($numbers…)：找出几个数值中的最大值。

percentage:

.test1{
    content:percentage(.2);
}
.test2{
    content:percentage(5px/20px);
}
.test3{
    content:percentage(5em/10em);
}

生成为：

image.png

>round:
.test1 {
    content1: round(12.3);
    content2: round(1.49999);
    content3: round(2.0);
    content4: round(20%);
    content5: round(2.2%);
    content6: round(3.9em);
    content7: round(2.3px);
    content8: round(2px/3px);
    content9: round(3em/2em);
}

生成为

.test1 {
  content1: 12;
  content2: 1;
  content3: 2;
  content4: 20%;
  content5: 2%;
  content6: 4em;
  content7: 2px;
  content8: 1;
  content9: 2; }

ceil:

.test2 {
    content1: ceil(12.3);
    content2: ceil(1.49999);
    content3: ceil(2.0);
    content5: ceil(2.2%);
    content6: ceil(3.9em);
    content7: ceil(2.3px);
    content8: ceil(2px/3px);
    content9: ceil(3em/2em);
}

生成为

.test2 {
  content1: 13;
  content2: 2;
  content3: 2;
  content5: 3%;
  content6: 4em;
  content7: 3px;
  content8: 1;
  content9: 2; }

floor:

.test3 {
    content1: floor(12.3);
    content2: floor(1.49999);
    content3: floor(2.0);
    content5: floor(2.2%);
    content6: floor(3.9em);
    content7: floor(2.3px);
    content8: floor(2px/3px);
    content9: floor(3em/2em);
}

生成为：

.test3 {
  content1: 12;
  content2: 1;
  content3: 2;
  content5: 2%;
  content6: 3em;
  content7: 2px;
  content8: 0;
  content9: 1; }

abs:

.test4 {
    content: abs(10);
    content: abs(-10);
    content: abs(-10px);
    content: abs(-2em);
    content: abs(-.5%);
    content: abs(-1px/2px);
}

生成为：
···
.test4 {
content: 10;
content: 10;
content: 10px;
content: 2em;
content: 0.5%;
content: 0.5; }
···

min:

.test5 {
    content1: min(1, 2, 1%, 3, 300%);
    content2: min(1px, 2, 3px);
    content1: min(1em, 2em, 6em);
}

生成为：
···
.test5 {
content1: 1%;
content2: 1px;
content1: 1em; }
···

max:

.test6 {
    content1: max(1, 2, 1%, 3, 300%);
    content2: max(1px, 2, 3px);
    content1: max(1em, 2em, 6em);
}

生成为：

.test6 {
  content1: 300%;
  content2: 3px;
  content1: 6em; }