2-2 Sass的函数功能-字符串与数字函数
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的函数功能-字符串与数字函数的更多相关文章
- Python不使用int()函数把字符串转换为数字
Python不使用int()函数把字符串转换为数字 2018年05月21日 14:18:45 边缘ob边缘ob 阅读数:1035 https://blog.csdn.net/qq_33192555/a ...
- 高精度运算专题-输出函数与字符串转数字函数(Output function and the string to number function)
输出函数:这个函数别看它小,但浓缩的都是精华啊 作用:对于高精度的数组进行倒序输出 思路:首先从被传入的数组第一位开始,一直往前扫输出就可以了(i--) 注释:因为每个数组的第一位是用来存储这个数组的 ...
- ORACLE字符串分组聚合函数(字符串连接聚合函数)
ORACLE字符串连接分组串聚函数 wmsys.wm_concat SQL代码: select grp, wmsys.wm_concat(str) grp, 'a1' str from dual un ...
- JS 字符串 时间 数字函数操作 事件
字符串 操作 var s="abcdefg" s.tolowerCase() 转小写 s.toupperCase() 转大写 s.substring(2,5) 索引下 ...
- strtod-strtod, 字符串 转 数字 函数
strtod()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负符号才开始做转换,到出现非数字或字符串结束时('\0')才结束转换,并将结果返回.若endptr不为 NULL,则会将遇 ...
- 实现字符串检索strstr函数、字符串长度strlen函数、字符串拷贝strcpy函数
#include <stdio.h> #include <stdlib.h> #include <string.h> /* _Check_return_ _Ret_ ...
- lua 根据函数名字符串来执行函数
function myfunction(msg) print("this is msg fun " .. msg); end local fun =_G["myfunct ...
- CreateThread函数&&CString::GetBuffer函数
对这个两个常见的windows下的函数学习了一下: //最简单的创建多线程实例 #include <stdio.h> #include <windows.h> //子线程函数 ...
- python27期day09:函数的初始、函数的定义、函数的调用、函数的返回值、函数的参数、作业题。
1.函数的作用:封装代码.大量的减少了重复的代码. 2.全局空间:顶行写的就是全局空间. 图解 : 3.函数的定义: def 是一个关键字.申明要定义一个函数 my_len 函数的名字.遵循变量命名的 ...
随机推荐
- 高阶篇:4.4)FMEA手册的疑问与不足(个人观点)
本章目的:如题,述说FMEA手册第四版的疑问与不足. 1.前言 作者接触FMEA,并真正将其作为可靠性设计方法,也是在近几年的时候,所以不能说算是一个FMEA专家吧. 但作者也有一些自己的优势,就是自 ...
- 【实战】sqlmap显示有注入却无法爆出库名
sqlmap爆mssql数据库时采用的语句如下图: 从语句中不难看出,如果关键字select被“(非tamper绕过)处理”了,那sqlmap是无法爆出数据库的,这时我们可以使用原始的猜解法, #判断 ...
- es与hive整合
在hive classpath中添加elasticsearch-hadoop.jar,以下方法任一种均可: 1.启动hiveserver2 前,在hive-site.xml文件中更改hive.aux. ...
- SpringCloud---客户端负载均衡---Spring Cloud Ribbon
1.概述 1.1 Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具: 基于Netflix Ribbon实现: 通过Spring Cloud的封装,可以轻松将面向服务 ...
- Sql数据库收缩 语句特别快
数据库在收缩的时候..使用菜单 >> 任务 >> 收缩 >> 文件 >> 数据, 特别慢..还会报错失败.. 但使用脚本 USE [dbName] G ...
- (转)python之os,sys模块详解
python之sys模块详解 原文:http://www.cnblogs.com/cherishry/p/5725184.html sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和 ...
- JDBC(3)-使用PreparedStatement接口实现增、删、改操作
1.PreparedStatement接口引入 PreparedStatement是Statement的子接口,属于预处理操作,与直接使用Statement不同的是,PreparedStatement ...
- [目录]ASP.NET web api开发实战
第一章:Restful web service v.s. RPC style web service 第二章:ASP.NET web api v.s. WCF v.s. ASP.NET web ser ...
- Java设计模式之适配器模式(Adapter)
转载:<JAVA与模式>之适配器模式 这个总结的挺好的,为了加深印象,我自己再尝试总结一下 1.定义: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法 ...
- Java的IO流各个类的使用原则
参考:http://blog.csdn.net/ilibaba/article/details/3955799 Java IO 的一般使用原则(花多眼乱,其实每个类都有专门的作用): 这里有详细介绍: ...