Sass语言的一些函数

unquote()函数

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

  1. //SCSS??

  2. .test1?{??

  3. ????content:?unquote(‘Hello?Sass!‘);??

  4. }.test2?{??

  5. ????content:?unquote("‘Hello?Sass!");??

  6. }.test3?{??

  7. ????content:?unquote("I‘m?Web?Designer");??

  8. }.test4?{??

  9. ????content:?unquote("‘Hello?Sass!‘");??

  10. }.test5?{??

  11. ????content:?unquote(‘"Hello?Sass!"‘);??

  12. }.test6?{??

  13. ????content:?unquote(Hello?Sass);??

  14. }?//CSS??

  15. .test1?{??

  16. ????content:?Hello?Sass!;??

  17. }.test2?{??

  18. ????content:?‘Hello?Sass!;?}.test3?{??

  19. ????????????content:?I?‘m?Web?Designer;?}.test4?{??

  20. ????????????????content:?‘Hello?Sass!‘;??

  21. ????????????}.test5?{??

  22. ????????????????content:?"Hello?Sass!";??

  23. ????????????}.test6?{??

  24. ????????????????content:?Hello?Sass;??

  25. ????????????}??

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

    quote()函数

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

  26. //SCSS??

  27. .test1?{??

  28. ????content:?quote(‘Hello?Sass!‘);??

  29. }.test2?{??

  30. ????content:?quote("Hello?Sass!");??

  31. }.test3?{??

  32. ????content:?quote(ImWebDesigner);??

  33. }.test4?{??

  34. ????content:?quote(‘?‘);??

  35. }?//CSS??

  36. .test1?{??

  37. ????content:?"Hello?Sass!";??

  38. }.test2?{??

  39. ????content:?"Hello?Sass!";??

  40. }.test3?{??

  41. ????content:?"ImWebDesigner";??

  42. }.test4?{??

  43. ????content:?"?";??

  44. }??

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

  45. .test1?{??

  46. ????content:?quote(Hello?Sass);??

  47. }??

    这样使用，编译器马上会报错：

  48. error?style.scss(Line?13:?$string:?("Hello"??

  49. ????????????"Sass")?is?not?a?string??

  50. ????????for?`quote‘)??

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

  51. .test1?{??

  52. ????content:?quote(HelloSass);??

  53. }.test1?{??

  54. ????content:?quote("Hello?Sass");??

  55. }??

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

数字函数

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

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

percentage()

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

>> percentage(.2)

20%

>> percentage(2px / 10px)

20%

>> percentage(2em / 10em)

20%

>>

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

  1. >>?percentage(2?px?/?10e?m)?SyntaxError:?$value:?0.2?px?/?em?is?not?a?unitless?number??

  2. 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

    在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

    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

    abs()函数

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

    >> abs(10)

    10

    >> abs(-10)

    10

    >> abs(-10px)

    10px

    >> abs(-2em)

    2em

    >> abs(-.5%)

    0.5%

    >> abs(-1px / 2px)

    0.5

    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‘.

    List函数

    列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

列表函数中的每个函数都有其独特的作用与功能，接下来我们通过命令终端向大家展示每个列表函数的功能与使用。

length()函数

length()函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值：

>> length(10px)

1

>> length(10px 20px (border 1px solid) 2em)

4

>> length(border 1px solid)

3

length()函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会把错：

>> length(10px,20px,(border 1px solid),2em)

SyntaxError: wrong number of arguments (4 for 1) for `length‘

>> length(1,2px)

SyntaxError: wrong number of arguments (2 for 1) for `length‘

nth()函数

nth()函数用来指定列表中某个位置的值。不过在Sass中，nth()函数和其他语言不同，1是指列表中的第一个标签值，2是指列给中的第二个标签值，依此类推。如：

>> nth(10px 20px 30px,1)

10px

>> nth((Helvetica,Arial,sans-serif),2)

"Arial"

>> nth((1px solid red) border-top green,1)

(1px "solid" #ff0000)

注：在nth($list,$n)函数中的$n必须是大于0的整数：

>> nth((1px solid red) border-top green 1 ,0)

SyntaxError: List index 0 must be a non-zero integer for `nth‘

join()函数

join()函数是将两个列表连接合并成一个列表。

>> join(10px 20px, 30px 40px)

(10px 20px 30px 40px)

>> join((blue,red),(#abc,#def))

(#0000ff, #ff0000, #aabbcc, #ddeeff)

>> join((blue,red),(#abc #def))

(#0000ff, #ff0000, #aabbcc, #ddeeff)

不过join()只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错：

>> join((blue red),(#abc, #def),(#dee #eff))

SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join‘

但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个join()函数合并在一起使用：

>> join((blue red), join((#abc #def),(#dee #eff)))

(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

在join()函数中还有一个很有特别的参数$separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为auto。

join()函数中$separator除了默认值auto之外，还有comma和space两个值，其中comma值指定列表中的列表项值之间使用逗号（,）分隔，space值指定列表中的列表项值之间使用空格（ ）分隔。

在join()函数中除非明确指定了$separator值，否则将会有多种情形发生：

如果列表中的第一个列表中每个值之间使用的是逗号（,），那么join()函数合并的列表中每个列表项之间使用逗号,分隔：

>> join((blue, red, #eff),(green orange))

(#0000ff, #ff0000, #eeffff, #008000, #ffa500)

但当第一个列表中只有一个列表项，那么join()函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔：

>> join(blue,(green, orange))

(#0000ff, #008000, #ffa500)

>> join(blue,(green orange))

(#0000ff #008000 #ffa500)

如果列表中的第一个列表中每个值之间使用的是空格，那么join()函数合并的列表中每个列表项之间使用空格分隔：

>> join((blue green),(red,orange))

(#0000ff #008000 #ff0000 #ffa500)

>> join((blue green),(red orange))

(#0000ff #008000 #ff0000 #ffa500)

如果当两个列表中的列表项小于1时，将会以空格分隔：

>> join(blue,red)

(#0000ff #ff0000)

如此一来，会有多种情形发生，造成使用混乱的情形，如果你无法记得，什么时候会是用逗号分隔合并的列表项，什么时候是使用空格分隔合并的列表项，在些建议大家使用join()函数合并列表项的时候就明确指定$separator参数，用来指定合并的列表中使用什么方式来分隔列表项：

>> join(blue,red,comma)

(#0000ff, #ff0000)

>> join(blue,red,space)

(#0000ff #ff0000)

>> join((blue green),(red,orange),comma)

(#0000ff, #008000, #ff0000, #ffa500)

>> join((blue green),(red,orange),space)

(#0000ff #008000 #ff0000 #ffa500)

>> join((blue, green),(red,orange),comma)

(#0000ff, #008000, #ff0000, #ffa500)

>> join((blue, green),(red,orange),space)

(#0000ff #008000 #ff0000 #ffa500)

>> join(blue,(red,orange),comma)

(#0000ff, #ff0000, #ffa500)

>> join(blue,(red,orange),space)

(#0000ff #ff0000 #ffa500)

>> join(blue,(red orange),comma)

(#0000ff, #ff0000, #ffa500)

>> join(blue,(red orange),space)

(#0000ff #ff0000 #ffa500)

append()函数

append()函数是用来将某个值插入到列表中，并且处于最末位。

>> append(10px 20px ,30px)

(10px 20px 30px)

>> append((10px,20px),30px)

(10px, 20px, 30px)

>> append(green,red)

(#008000 #ff0000)

>> append(red,(green,blue))

(#ff0000 (#008000, #0000ff))

如果没有明确的指定$separator参数值，其默认值是auto。如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。

当然，在append()函数中，可以显示的设置$separator参数，如果取值为comma将会以逗号分隔列表项，如果取值为space将会以空格分隔列表项：

>> append((blue green),red,comma)

(#0000ff, #008000, #ff0000)

>> append((blue green),red,space)

(#0000ff #008000 #ff0000)

>> append((blue, green),red,comma)

(#0000ff, #008000, #ff0000)

>> append((blue, green),red,space)

(#0000ff #008000 #ff0000)

>> append(blue,red,comma)

(#0000ff, #ff0000)

>> append(blue,red,space)

(#0000ff #ff0000)

zip()函数

zip()函数将多个列表值转成一个多维的列表：

>> zip(1px 2px 3px,solid dashed dotted,green blue red)

((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

在使用zip()函数时，每个单一的列表个数值必须是相同的：

>> zip(1px 2px 3px, solid , green blue red)

NoMethodError: undefined method `options=‘ for nil:NilClass

Use --trace for backtrace.

否则将会出错。

zip()函数中每个单一列表的值对应的取其相同位置值：

|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|

|------------|--------------|--------------|--------------|

| List1 | 1px | 2px | 3px |

|------------|--------------|--------------|--------------|

| List2 | solid | dashed | dotted |

|------------|--------------|--------------|--------------|

| List3 | green | blue | red |

|------------|--------------|--------------|--------------|

zip()函数组合出来就成了：

1px solid green, 2px dashed blue, 3px dotted red

index()函数

index()函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在Sass中，第一个值就是1,第二个值就是2，依此类推：

>> index(1px solid red, 1px)

1

>> index(1px solid red, solid)

2

>> index(1px solid red, red)

3

在index()函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是false，相反就会返回对应的值在列表中所处的位置。

>> index(1px solid red,dotted) //列表中没有找到dotted

false

>> index(1px solid red,solid) //列表中找到solid值，并且返回他的位置值2

2

Introspection函数

Introspection函数包括了几个判断型函数：

这几个函数主要用来对值做一个判断的作用，依次来看每个函数的功能。

type-of()函数

type-of()函数主要用来判断一个值是属于什么类型：

>> type-of(100)

"number"

>> type-of(100px)

"number"

>> type-of("asdf")

"string"

>> type-of(asdf)

"string"

>> type-of(true)

"bool"

>> type-of(false)

"bool"

>> type-of(#fff)

"color"

>> type-of(blue)

"color"

>> type-of(1 / 2 = 1)

"string"

unit()函数

unit()函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个多单位组合的值，不过只充许乘除运算：

>> unit(100)

""

>> unit(100px)

"px"

>> unit(20%)

"%"

>> unit(1em)

"em"

>> unit(10px * 3em)

"em*px"

>> unit(10px / 3em)

"px/em"

>> unit(10px * 2em / 3cm / 1rem)

"em/rem"

但加减碰到不同单位时，unit()函数将会报错，除px与cm、mm运算之外：

>> unit(1px + 1cm)

"px"

>> unit(1px - 1cm)

"px"

>> unit(1px + 1mm)

"px"

>> unit(10px * 2em - 3cm / 1rem)

SyntaxError: Incompatible units: ‘cm‘ and ‘px*em‘.

>> unit(10px * 2em - 1px / 1rem)

SyntaxError: Incompatible units: ‘‘ and ‘em‘.

>> unit(1px - 1em)

SyntaxError: Incompatible units: ‘em‘ and ‘px‘.

>> unit(1px - 1rem)

SyntaxError: Incompatible units: ‘rem‘ and ‘px‘.

>> unit(1px - 1%)

SyntaxError: Incompatible units: ‘%‘ and ‘px‘.

>> unit(1cm + 1em)

SyntaxError: Incompatible units: ‘em‘ and ‘cm‘.

unit()函数对于单位运算相对来说也没有规律，而且有些单位也无法整合成一个单位，对于我们在CSS中运用中并不适合，比如：

>> unit(10px * 3em)

"em*px"

>> unit(10px / 3em)

"px/em"

>> unit(10px * 2em / 3cm / 1rem)

"em/rem"

换句话说，上面运算出来的单位，对于在CSS中使用将是没有任何意义的。

unitless()函数

unitless()函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为true，带单位返回的值为false：

>> unitless(100)

true

>> unitless(100px)

false

>> unitless(100em)

false

>> unitless(100%)

false

>> unitless(1 /2 )

true

>> unitless(1 /2 + 2 )

true

>> unitless(1px /2 + 2 )

false

comparable()函数

comparable()函数主要是用来判断两个数是否可以进行加，减以及合并。如果可以返回的值为true，如果不可以返回的值是false：

>> comparable(2px,1px)

true

>> comparable(2px,1%)

false

>> comparable(2px,1em)

false

>> comparable(2rem,1em)

false

>> comparable(2px,1cm)

true

>> comparable(2px,1mm)

true

>> comparable(2px,1rem)

false

>> comparable(2cm,1mm)

true

Miscellaneous函数

在这里把Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

  1. if?($condition,?$if?-?true,?$if?-?false)??

    上面表达式的意思是当$condition条件成立时，返回的值为$if-true，否则返回的是$if-false值。

    >> if(true,1px,2px)

    1px

    >> if(false,1px,2px)

    2px

    自定义函数

    自定义函数是用户根据自己一些特殊的需求编写的Sass函数。在很多时候，Sass自带的函数并不能满足功能上的需求，所以很多时候需要自定义一些函数。

    例如，我们需要去掉一个值的单位，在这种情形之下,Sass自带的函数是无法帮助我们完成，这个时候我们就需要定义函数：

  2. //去掉一个值的单位，如12px?=>?12?//?eg.?strip-units(12px)?=>?12??

  3. @??

  4. function?strip?-?units($number)?{@??

  5. ????return?$number?/?($number?*?0?+?1);??

  6. }??

    ?
    ?

    上在演示是一个经典的去除单位的自定义函数，除了这个函数之外，大家还可以根据自己需求定义其他的函数，正如前面介绍的pxToem和pxTorem两个自定义的函数。

    总结

    在这一节中，主要根据Sass的官网介绍的函数为范本，借助Sass的sass -i命令在终端向大家展示了Sass函数中的字符串函数、数字函数、列表函数、Introspection函数以及三元函数等功能以及使用方法。并且在最后简单的介绍了在Sass中如何自定义Sass的函数。希望这篇文章对于初学者能更好的理解Sass中的自带函数的功能与作用。

    转载：http://www.w3cplus.com/preprocessor/sass-other-function.html

时间： 2024-10-09 00:09:25

Sass语言的一些函数的相关文章

Oracle SQL语言之常用函数_超越OCP精通Oracle视频教程培训30

Oracle SQL语言之常用函数_超越OCP精通Oracle视频教程培训30 本课程介绍: Oracle视频教程,风哥本套oracle教程培训是<<Oracle数据库SQL语言实战培训教程>>的第5/5套:Oracle SQL语言之常用函数.主要学习Oracle数据库SQL聚合函数,分组函数,字符函数,转换函数,日期字符数字转换,日期函数,集合函数,分析函数等. Oracle SQL语言之常用函数,课程内容详细如下: 聚合函数-数据统计 分组函数-使用group by与havin

想精度高，可以考虑用c语言中的函数gettimeofday

大家好: 在 win32 + bcb 时, 有个 GetTickCount() 返回第统启动到现在的 tick, 单位 ms.请问在 Linux + qt5 怎样实现呢? 如果用 QDateTime , 精度只能到秒,而且运行过程中,如果用户改充了系统时间,就会出错了. 用QElapsedTimer. 想精度高,可以考虑用c语言中的函数gettimeofday,微秒级精度 #include <sys/time.h>int gettimeofday(struct timeval*tv, stru

C语言文件操作函数的编写

 编写文件操作的头文件 /************************************************************************** Copyright(C)    :2014-08-5 toto Filename       :file.h Author          :涂作权 Version         :V1.1 Date            :2014-08-05 Description     :文件操作的头文件 Others  

C语言可变参数函数实现原理

一.可变参数函数实现原理 C函数调用的栈结构: 可变参数函数的实现与函数调用的栈结构密切相关,正常情况下C的函数参数入栈规则为__stdcall, 它是从右到左的,即函数中的最右边的参数最先入栈. 本文地址:http://www.cnblogs.com/archimedes/p/variable-parameter.html,转载请注明源地址. 例如,对于函数: void fun(int a, int b, int c) { int d; ... } 其栈结构为 0x1ffc-->d 0x200

C++函数重载实现的原理以及为什么在C++中调用C语言编译的函数时要加上extern &quot;C&quot;声明

C++相对于C语言而言支持函数重载是其极大的一个特点,相信在使用C语言的时候大家如果要写一个实现两个整型数据相加的函数还要写一个浮点型数据相加的函数,那么这两个函数的名字绝对不可以一样,这样无疑在我们使用这个函数的时候增加了复杂性,但是在C++中我们却可以很好的解决这个问题,因为在C++中函数是支持重载的也就是说两个函数的函数名可以一样,这样并不会出现函数名重定义的问题,但是我们在使用的时候也要遵守一些规定,这些规定我们会在接下来的讨论中提到,下面我们就来分析在C++中函数是如何实现函数的重载的

R语言之merge函数案例

R语言的merge函数可以实现类似SQL的有点类似 left join right join 或者类似union的效果. df1 = data.frame(CustomerId=c(1:6),Product=c(rep("Toaster",3),rep("Radio",3))) > df2 = data.frame(CustomerId=c(2,4,6,7),State=c(rep("Alabama",3),rep("Ohio&q

C语言-字符操作函数

1字符数组的初始化: 1.1 char string={'c','h','i','n','a'} 1.2char string={"china"}或者去掉{}即char string=“china" 1.3 strcpy(string,"china") 2字符串长度:字符串长度函数strlen(char string)=字符的个数+1(结束符"\0") 3输入与输出:printf("\s",string) scanf

C语言的时间函数

---恢复内容开始--- 下面是C语言的获取本地时间和构造时间进行格式化时间显示输出的相关函数:This page is part of release 3.35 of the Linux man-pages project. #include <time.h> char *asctime(const struct tm *tm); char *asctime_r(const struct tm *tm, char *buf); char *ctime(const time_t *timep)

c语言文件操作函数

c语言文件操作函数大全 fopen(打开文件) 相关函数 open,fclose 表头文件 #include<stdio.h> 定义函数 FILE * fopen(const char * path,const char * mode); 函数说明 参数path字符串包含欲打开的文件路径及文件名,参数mode字符串则代表着流形态. mode有下列几种形态字符串: r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在. w 打开只写文件,若文件存在则文件长度清为0,即该文件