码迷,mamicode.com
首页 > 其他好文 > 详细

10天精通Sass 之 处理字符串与数字的函数

时间:2016-08-20 23:29:07      阅读:497      评论:0      收藏:0      [点我收藏+]

标签:

Sass的函数简介

Sass中自备了一系列的功能函数,包括:
- 字符串函数
- 数字函数
- 列表函数
- 颜色函数
- Introspection函数
- 三元函数

除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数。

字符串函数

* unquote($string) * :删除字符串中的引号
* quote($string) * :给字符串加引号

unquote()函数
用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串。

.test1 {
    content: unquote("hello demo");
}

.test2 {
    content: unquote(‘"Hello Sass!"‘);
}

.test3 {
    content: unquote("hello demo" + "Hello Sass!");
}

编译后的CSS为:

.test1 {
  content: hello demo; 
}

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

.test3 {
  content: hello demoHello Sass!; 
}

==注意:== unquote()函数能删除每个字符串最前和最后的引号(双引号或单引号),无法删除字符串中间的引号。

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

.test1 {
    content:  quote(‘hello demo!‘);
}
.test2 {
    content: quote("hello demo");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(‘ ‘);
}
.test5 {
    content: quote(hello + demo + yes);
}

编译出来的CSS为:

.test1 {
  content: "hello demo!"; 
}

.test2 {
  content: "hello demo"; 
}

.test3 {
  content: "ImWebDesigner"; 
}

.test4 {
  content: " "; 
}

.test5 {
  content: "hellodemoyes"; 
}

需要注意的是:
quote()不能给中间有空格且没有用+号连接的字符串加引号,会报错。

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

* to-upper-case() *

将字符串小写字母转换成大写字母

.test{
    content: to-upper-case(hellodemo);
}

编译出来的CSS为:

.test{
    content: HELLODEMO;
}

* to-lower-case() *

.test{
    content: to-upper-case(HELLODEMO);
}

编译出来的CSS为:

.test{
    content: hellodemo;
}

需要注意的是 字符串不能加引号,字符串中间不能含有空格,并且除中折号 - 和 下划线_ ,不能含有其他特殊符号,否则会报错

数字函数

percentage()将一个不带单位的数字转换成百分比形式
当使用百分比布局时:

@for $i from 1 through 5{
    .col-#{$i} {
        width: percentage($i/5);
    }
}

编译出来的CSS为:

.col-1 {
  width: 20% ;;
}

.col-2 {
  width: 40% ;;
}

.col-3 {
  width: 60% ;;
}

.col-4 {
  width: 80% ;;
}

.col-5 {
  width: 100% ;;
}

需要注意的是: percentage只能将数字变成百分制的表示方式。对于字符串或者带有单位的数字,使用percentage 会报错.

round():将数值进行四舍五入;

.span1{
    width: round(12.3px);
}
.span2{
    width: round(13.5);
}
.span3{
    width: round(12.3abx);
}

编译出来的结果为:

.span1 {
  width: 12px;
}

.span2 {
  width: 14;
}

.span3 {
  width: 12abx;
}

round()函数处理数字时,允许数字带单位,但是这个单位究竟是什么字符,sass并不会检查。仅需要是以数字开头即可。如果以字符串开头,那么round()会报错。

ceil():向上取整;

.span1{
    width: 12.3;
}
.span2{
    width: 21.8px;
}

编译后的CSS为:

.span1 {
  width: 12.3;
}

.span2 {
  width: 21.8px;
}

类似的函数还要,floor()函数用于向下取整。
abs(),取绝对值。
参数同ceil()

max()和min()函数

max()返回最大值

min()返回最小值

只能比较相同类型单位,不能对比不同类型的单位。

.span1{
    width: min(6,50,15,3,200%);
}

.span2{
    width: max(10in,23px);
}

编译出来的CSS为:

.span1 {
  width: 3;
}

.span2 {
  width: 10in;
}

random()生成0-1之间的随机数

div{
    width: random() * 20#{px}
}
span{
    width: random()
}

编译出来的CSS为:

div {
  width: 1.73254px;
}

span {
  width: 0.85449;
}
graph LR
A-->B

10天精通Sass 之 处理字符串与数字的函数

标签:

原文地址:http://blog.csdn.net/liuyan19891230/article/details/52264001

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!