Sass的函数简介

在 Sass 中除了可以定义变量,具有 @extend、%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能。其主要包括:

  • 字符串函数
  • 数字函数
  • 列表函数
  • 颜色函数
  • Introspection 函数
  • 三元函数等

当然除了自备的函数功能之外,我们还可以根据自己的需求定义函数功能,常常称之为自定义函数。

下面将给大家详细介绍前 4 种最常用的函数。

字符串函数-unquote()函数

字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数:

  • unquote($string):删除字符串中的引号;
  • quote($string):给字符串添加引号。

1、unquote()函数

unquote() 函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串。简单的使用终端来测试这个函数的运行结果:

//SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

编译后的 css 代码:

//CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

注意:从测试的效果中可以看出,unquote( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。如果字符没有带引号,返回的将是字符串本身。

字符串函数-quote()函数

quote() 函数刚好与 unquote() 函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号会统一换成双引号 ""。如:

//SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}

编译出来的 css 代码:

//CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}
.test3 {
  content: "ImWebDesigner";
}
.test4 {
  content: "";
}

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

.test1 {
    content:  quote(Hello Sass);
}

这样使用,编译器马上会报错:

error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

解决方案就是去掉空格,或者加上引号:

.test1 {
    content:  quote(HelloSass);
}
.test1 {
    content:  quote("Hello Sass");
}

同时 quote() 碰到特殊符号,比如: !、?、> 等,除中折号 - 和 下划线_ 都需要使用双引号括起,否则编译器在进行编译的时候同样会报错:

error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")
error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was “?);")

字符串函数-To-upper-case()、To-lower-case()

1、To-upper-case()

To-upper-case() 函数将字符串小写字母转换成大写字母。如:

//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

编译出来的 css 代码:

//CSS
.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

2、To-lower-case()

To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母:

//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

编译出来的 css 代码:

//CSS
.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

数字函数简介

Sass 中的数字函数提要针对数字方面提供一系列的函数功能:

  • percentage($value):将一个不带单位的数转换成百分比值;
  • round($value):将数值四舍五入,转换成一个最接近的整数;
  • ceil($value):将大于自己的小数转换成下一位整数;
  • floor($value):将一个数去除他的小数部分;
  • abs($value):返回一个数的绝对值;
  • min($numbers…):找出几个数值之间的最小值;
  • max($numbers…):找出几个数值之间的最大值;
  • random(): 获取随机数

看到上面函数的简介,对于熟悉Javascript 同学而言并不会感觉陌生。因为他们有很多功能都非常类似,接下来对每个函数进行一些简单的测试 。

数字函数-percentage()

1、percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式:

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
>>
.footer{
    width : percentage(.2)
}

编译后的 css 代码:

.footer{
    width : 20%
}

如果您转换的值是一个带有单位的值,那么在编译的时候会报错误信息:

>> percentage(2px / 10em)
SyntaxError: $value: 0.2px/em is not a unitless number for `percentage'

数字函数-round()函数

round() 函数可以将一个数四舍五入为一个最接近的整数:

>> round(12.3)
12
>> round(12.5)
13
>> round(1.49999)
1
>> round(2.0)
2
>> round(20%)
20%
>> round(2.2%)
2%
>> round(3.9em)
4em
>> round(2.3px)
2px
>> round(2px / 3px)
1
>> round(1px / 3px)
0
>> round(3px / 2em)
2px/em
.footer {
   width:round(12.3px)
}

编译后的 css 代码:

.footer {
  width: 12px;
}

在round() 函数中可以携带单位的任何数值。

数字函数-ceil()函数

ceil() 函数将一个数转换成最接近于自己的整数,会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入,不做舍的计算:

>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1
>> ceil(2% / 3px)
1%/px
>> ceil(1em / 5px)
1em/px
.footer {
   width:ceil(12.3px);
}

编译后的 css 代码:

.footer {
  width: 13px;
}

数字函数-floor()函数

floor() 函数刚好与 ceil() 函数功能相反,其主要将一个数去除其小数部分,并且不做任何的进位。也就是只做舍,不做入的计算:

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
10em
>> floor(2px / 10px)
0
>> floor(3px / 1em)
3px/em
.footer {
   width:floor(12.3px);
}

编译后的 css 代码:

.footer {
  width: 12px;
}

数字函数-abs()函数

abs( ) 函数会返回一个数的绝对值。

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5
.footer {
   width:abs(-12.3px);
}

编译后的 css 代码:

.footer {
  width: 12.3px;
}

数字函数-min()函数、max()函数

min()函数

min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数:

>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

不过在 min() 函数中同时出现两种不同类型的单位,将会报错误信息:

>> min(1px,1em)
SyntaxError: Incompatible units: 'em' and 'px'.

max()函数

max() 函数和 min() 函数一样,不同的是,max() 函数用来获取一系列数中的最大那个值:

>> max(1,5)
5
>> max(1px,5px)
5px

同样的,如果在 max() 函数中有不同单位,将会报错:

>> max(1,3px,5%,6)
SyntaxError: Incompatible units: '%' and ‘px'.

数字函数-random()函数

random() 函数是用来获取一个随机数:

>> random()
0.03886
>> random()
0.66527
>> random()
0.8125
>> random()
0.26839
>> random()
0.85063

2-2 Sass的函数功能-字符串与数字函数的更多相关文章

  1. Python不使用int()函数把字符串转换为数字

    Python不使用int()函数把字符串转换为数字 2018年05月21日 14:18:45 边缘ob边缘ob 阅读数:1035 https://blog.csdn.net/qq_33192555/a ...

  2. 高精度运算专题-输出函数与字符串转数字函数(Output function and the string to number function)

    输出函数:这个函数别看它小,但浓缩的都是精华啊 作用:对于高精度的数组进行倒序输出 思路:首先从被传入的数组第一位开始,一直往前扫输出就可以了(i--) 注释:因为每个数组的第一位是用来存储这个数组的 ...

  3. ORACLE字符串分组聚合函数(字符串连接聚合函数)

    ORACLE字符串连接分组串聚函数 wmsys.wm_concat SQL代码: select grp, wmsys.wm_concat(str) grp, 'a1' str from dual un ...

  4. JS 字符串 时间 数字函数操作 事件

    字符串  操作 var s="abcdefg" s.tolowerCase()   转小写 s.toupperCase()   转大写 s.substring(2,5)   索引下 ...

  5. strtod-strtod, 字符串 转 数字 函数

    strtod()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负符号才开始做转换,到出现非数字或字符串结束时('\0')才结束转换,并将结果返回.若endptr不为 NULL,则会将遇 ...

  6. 实现字符串检索strstr函数、字符串长度strlen函数、字符串拷贝strcpy函数

    #include <stdio.h> #include <stdlib.h> #include <string.h> /* _Check_return_ _Ret_ ...

  7. lua 根据函数名字符串来执行函数

    function myfunction(msg) print("this is msg fun " .. msg); end local fun =_G["myfunct ...

  8. CreateThread函数&amp;&amp;CString::GetBuffer函数

    对这个两个常见的windows下的函数学习了一下: //最简单的创建多线程实例 #include <stdio.h> #include <windows.h> //子线程函数 ...

  9. python27期day09:函数的初始、函数的定义、函数的调用、函数的返回值、函数的参数、作业题。

    1.函数的作用:封装代码.大量的减少了重复的代码. 2.全局空间:顶行写的就是全局空间. 图解 : 3.函数的定义: def 是一个关键字.申明要定义一个函数 my_len 函数的名字.遵循变量命名的 ...

随机推荐

  1. 如何高度自定义CollectionView的header和foot

    最近在研究CollectionView,突然发现觉得他的HeaderSection和FootSection也可以高度自定义. 国外有详细的教程:http://www.appcoda.com/ios-c ...

  2. java面向对象概念1

    一.java面向对象学习的三条主线: 1.java类及类的成员:属性.方法.构造器:代码块.内部类 2.面向对象的三大特征:封装性.继承性.多态性.(抽象性) 3.其它关键字:this.super.s ...

  3. linux的sed(增删改查)使用方法

    sed的增删改查的基本操作 参考:https://www.cnblogs.com/0zcl/p/6855740.html 01:增(a) 2个sed命令,分别是:(这些操作都是在内存中进行的,所以不会 ...

  4. 基础篇:6.5)形位公差-基本规则 Basic Rules

    本章目的:述说形位公差的基本规则 1.代表规则的修正符号与使用情况: 使用情况举例: 2  有关术语 为了明确线性尺寸公差与形位公差之间关系,对尺寸术语将作进一步论述与定义. //无需强记,但希望现有 ...

  5. 「BZOJ3998」[TJOI2015] 弦论(第K小子串)

    https://www.lydsy.com/JudgeOnline/problem.php?id=3998 Description 对于一个给定长度为N的字符串,求它的第K小子串是什么. Input ...

  6. vue项目里登录界面实现回车登录

    全局监听enter键,是把监听事件绑定到document上,无需获取焦点之类的 created() { let that = this; document.onkeydown =function(e) ...

  7. C# winform窗体传值 利用委托 子窗体传值给父窗体

    首先在Form2中定义委托和事件: //声明委托 和 事件 public delegate void TransfDelegate(String value); public partial clas ...

  8. Java生成树关系的菜单

    1.菜单bean public class Menu { private String id; private String menuname; private String parentid; pr ...

  9. 差分ADC到单端ADC

    单片机可以处理单端ADC(不在电压范围内要进行分压),也可以处理差分ADC(但需要双路输入).差分信号在传输过程中抗共模干扰能力很强,所以传输中都用差分传输,到ADC时可以差分也可以单端(需要放大器处 ...

  10. C#常用的引用

    1.使用ConfigurationManager需要在.net引用中添加System.Configuration引用 2.使用HttpContext需要在.net引用中添加System.Web引用