2-2 Sass的函数功能-字符串与数字函数
来源:互联网 发布:借贷软件 编辑:程序博客网 时间:2024/06/09 23:28
在 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的函数功能-字符串与数字函数
- 2-2 Sass的函数功能-字符串与数字函数
- 2-2 Sass的函数功能-字符串与数字函数
- sass函数功能(字符串和数字)
- 2-3 Sass的函数功能-列表函数
- 2-4 Sass的函数功能-颜色函数
- 2-3 Sass的函数功能-列表函数
- 2-4 Sass的函数功能-颜色函数
- 2-3 Sass的函数功能-列表函数
- 2-4 Sass的函数功能-颜色函数
- 10天精通Sass 之 处理字符串与数字的函数
- sass函数功能
- sass学习--sass的函数功能(进阶篇)
- sass进阶-(函数与调试)
- 数字字符串与数字相互转化-atoi函数和itoa函数的实现
- VC数字字符串与字符的转换函数
- 一组C++中的字符串与数字的互转函数
- 数字-功能函数、随机数
- 1-1 sacc(scss)入门
- 1-3 Sass 语法、编译、调试
- 1-4 Sass的基本特性-基础
- 1-5 Sass的基本特性-运算
- 2-1 Sass的控制命令
- 2-2 Sass的函数功能-字符串与数字函数
- 2-3 Sass的函数功能-列表函数
- 2-4 Sass的函数功能-颜色函数
- 2-5 Sass 的 @ 规则
- React Native之React速学教程(上)
- React Native之React速学教程(中)
- React Native之React速学教程(下)
- Linux下安装MongoDB
- PHP 设置调试工具XDebug PHPStorm IDE