Sass的那些装逼函数(function)

更新日期: 2021-11-24阅读量: 30标签: Sass

玩玩Sass 自带的一些函数...有字符串函数(String Functions)、数字函数(Number Functions)、列表函数(List Functions)、颜色函数(Color Functions)、Introspection 函数(Introspection Functions)、三元函数(Miscellaneous Function)

1. 字符串函数

1.1 quote()

quote($string)给$string前后添加引号。
//Scss:
p:after{
  content: quote(hello +' '+ sass); 
  //中间有空格(其他特殊符号)需要拼字符串;quote(hello sass); 直接这样会报错;
}
p:before{
  content: quote('This\'s' + ' ' + 'bug');
  //如果$string本身就带有引号,则会统一换成双引号`""`;
}

//编译为:
p:after { content: "hello sass"; }
p:before { content: "This's bug"; }

1.2 unquote()

unquote($string) 删除 $string 前后的引号。
//Scss:
p:after{
  content: unquote("This's bug"); //中间的引号未被删除;
}
p:before{
  content: unquote(Thissbug);
  //如$string本身就不带引号,则返回$string本身;
}

//编译为:
p:after { content: This's bug; }
p:before { content: sass; }

其实吧!这俩玩意在项目中我还真没用到过!

1.3 str-length()

str-length($string) 返回 $string 的长度。
//SCSS:
p:before { content: str-length('hello sass!'); }

//编译为:
p:before { content: 11; }

1.4 to-upper-case()

to-upper-case($string) 将$string小写字母转成大写字母。
//SCSS:
p:before { content: to-upper-case('hello sass!'); }

//编译为:
p:before { content: "HELLO SASS!"; }

1.5 to-lower-case()

to-lower-case($string) 将$string大写字母转成小写字母。
//SCSS:
p:before { content: to-lower-case('HELLO SASS!'); }

//编译为:
p:before { content: "hello sass!"; }

2. 数字函数

2.1 percentage()

percentage($number) 将一个不带单位的数值转成百分比。
//SCSS:
.box{ width: percentage(.5)}
.box2{ width: percentage(.1rem / .3rem)}

经测试,两个相同的单位,除了用除法 '/' 其他+-%均会报错,且用除法 '/' 也只能在两个相同类型的单位之间进行运算;*

//编译为:
.box { width: 50%; }
.box2 { width: 33.33333%; }

2.2 round()

round($number) 将$number 四舍五入为整数,$number可带单位。
//SCSS:
.xs-row{ width: round(33.33333333333333px)}

//编译为:
.xs-row { width: 33px; }

2.3 ceil()

ceil($number) 大于 $number ,向上取整。
//SCSS
.fs14{ font-size: ceil(13.1px)}
.fs16{ font-size: ceil(15.9px)}

//编译为:
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }

2.4 floor()

与 ceil()相反,floor($number) 去除 $number 小数,向下取整。
//SCSS:
.fs14{ font-size: floor(14.1px) }
.fs16{ font-size: floor(16.9px) }

//编译为:
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }

2.5 abs()

abs($number),返回 $number 的绝对值。
//SCSS:
.fs16{ font-size: abs(-1.6rem) }
.fs18{ font-size: abs(1.8rem) }

//编译为:
.fs16{ font-size: 1.6rem; }
.fs18{ font-size: 1.8rem; }

2.6 min() max()

min($numbers…),返回 $number... 的最小值。
max($numbers…),返回 $number... 的最大值。
//SCSS:
div{ width: min(2rem, 10rem) }
div{ width: max(2rem, 10rem) }
div{ width: max(2px, 10rem) } //非相同的单位,报错

//编译为:
div { width: 2rem; }
div { width: 10rem; }
Incompatible units: 'rem' and 'px'

2.7 random()

random([$limit]),返回一个随机数。
//SCSS:
div {
    height: random(); //直接调用
    width: random(666); //传个参
}
//编译为:
div {
  height: 0.3649;
  width: 403;
}

3. 列表函数

常用

3.1 length() nth()

length($list),返回 $list 的长度值;
nth($list, $n),返回 $list 中指定的某个 $n,且 $n必须是大于0的整数;

JavaScript的Array()的索引是从0开始的,厄...有点扯远了,用过 css3 的 :nth-child(n)都应该知道啦,索引下标也是从1开始的,So.....

//SCSS:
$list: google, baidu, sogo;
@for $i from 1 through length($list){ //取$list的length并循环输出;
  .icon-#{nth($list, $i)}{ //$list中的某个索引值;
    content: '#{nth($list, $i)}'
  }
}

//编译为:
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }

3.2 join()

join($list1, $list2, [$separator]) 将两个列表给连接在起来,组成一个列表;
$separator 默认值是 auto,另外还有 comma 和 space 两个值,其中 comma 值指定列表中的列表项值之间使用逗号 , 隔开,space 值指定列表中的列表项值之间使用 空 格 分隔。
join((blue, red), (#abc, #def), space) => blue red #abc #def //space
join(10px, 20px, comma) => 10px, 20px //comma

Examples:

//SCSS:
$list1: google, baidu, sogo;
$list2: facebook, instagram, twitter;
$list3: join($list1, $list2); //讲真啦,很少用到join(),反正我是很少用到;
@for $i from 1 through length($list3){
  .icon-#{nth($list3, $i)}{
    content: '#{nth($list3, $i)}'
  }
}

//编译为:
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }
.icon-facebook { content: "facebook"; }
.icon-instagram { content: "instagram"; }
.icon-twitter { content: "twitter"; }

3.3 index()

index($list, $value),返回 $list 中的 $value所在的位置。
index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

3.4 list-separator()

list-separator($list),返回 $list 中的分隔符。
list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space

4. Introspection 函数

4.1 type-of()

type_of($value) 返回 $value 的类型。
type-of(abc)   => string
type-of("abc") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(green)   => color

4.2 unit()

unit($number) 返回 $number 所使用的单位。
unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

4.3 unitless()

unitless($number) 返回 $number 是否带有单位;如果不带单位返回值为 true,带单位返回值为 false。
unitless(100) => true
unitless(100px) => false

5. Miscellaneous 函数

Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值
if($condition, $if-true, $if-false)

当 $condition 条件为真,则返回 $if-true 值,否则返回 $if-false值。

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

6. 颜色函数

暂时还没用到过。

6.1 RGB函数()

rgb($red, $green, $blue),根据$red、$green、$blue三个值创建一个颜色;
rgba($red, $green, $blue, $alpha),将一个颜色根据透明度转换成 rgba 颜色。
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)

7. Reference API

Sass::Script::Functions — Sass Documentation

结语:既然你都看到这里了,我就说说吧,这些个函数其实也就在自己写插件的时候有用,其他时候可能会有些大材小用。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10847

如何使用SASS编写可重用的CSS?

Sass 是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的

原生 CSS “杀死” 预处理器 Sass!

我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性

Sass 颜色函数

本节我们来看一下 Sass 中的颜色函数,颜色函数可以分为三部分,分别是颜色设置、颜色获取以及颜色操作。Sass 中的颜色函数有很多,下面我们来看一些 Sass 中常用的颜色函数:

CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?

最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。

CSS预处理语言的模块化实践

编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋。对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目

Sass 简介

Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复

Sass的函数整理

Sass 定义了各种类型的函数,这些函数可以通过 CSS 语句直接调用。可以看到Sass的函数功能已经相当丰富了。整理了Sass的主要函数,重点在于后面的颜色函数,设计非常的银杏!

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

node-sass是什么?

Node-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!