Sass预处理器 常见函数的基本使用

  • Sass预处理器 常见函数的基本使用已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

Sass提供了许多内置模块,其中包含有用的函数(以及mixin)。这些模块可以像任何用户定义的样式表一样使用@use规则加载,它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头:表示它们是sass本身的一部分。

Sass提供了许多内置模块,其中包含有用的函数(以及mixin)。这些模块可以像任何用户定义的样式表一样使用@use规则加载,它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头:表示它们是sass本身的一部分。

常见函数简介,更多函数列表可看:https://sass-lang.com/documentation/modules

Color(颜色函数)

​ sass包含很多操作颜色的函数。例如:lighten() 与 darken()函数可用于调亮或调暗颜色,opacify()函数使颜色透明度减少,transparent()函数使颜色透明度增加,mix()函数可用来混合两种颜色。

p {     height: 30px; }  .p0 {     background-color: #5c7a29; }  .p1 {     /*          让颜色变亮         lighten($color, $amount)         $amount 的取值在0% - 100% 之间      */     background-color: lighten(#5c7a29, 30%); }  .p2 {     // 让颜色变暗  通常使用color.scale()代替该方案     background-color: darken(#5c7a29, 15%); }  .p3 {     // 降低颜色透明度  通常使用color.scale()代替该方案     // background-color: opacify(#5c7a29,0.5);     background-color: opacify(rgba(#5c7a29, 0.1), 0.5); } 

使用

<p></p> <p class="p0"></p> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> 

更多详细使用:https://sass-lang.com/documentation/modules/color

String(字符串函数)

​ Sass有许多处理字符串的函数,比如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()。

p {     &:after {         content: quote(这是里面的内容);     }     background-color: unquote($string: "#F00");     z-index:str-length("sass学习"); } 

更多详细使用:https://sass-lang.com/documentation/modules/string

Math(数值函数)

​ 数值函数处理数值计算,例如:percentage()将无单元的数值转换为百分比,round()将数字四舍五入为最接近的整数,min()和max()获取几个数字中的最小值或最大值,random()返回一个随机数。

例如

p {     z-index: abs($number: -15); // 15     z-index: ceil(5.8); //6     z-index: max(5, 1, 6, 8, 3); //8     opacity: random(); // 随机 0-1 } 

更多详细使用:https://sass-lang.com/documentation/modules/math

List函数

List函数操作List,length()返回列表长度,nth()返回列表中的特定项,join()将两个列表连接在一起,append()在列表末尾添加一个值。

例如:

p {     z-index: length(12px); //1     z-index: length(12px 5px 8px); //3     z-index: index(a b c d, c); //3     padding: append(10px 20px, 30px); // 10px 20px 30px     color: nth($list: red blue green, $n: 2); // blue } 

更多详细使用:https://sass-lang.com/documentation/modules/list

Map函数

Map函数操作Map,map-get()根据键值获取map中的对应值,map-merge()来将两个map合并成一个新的map,map-values()映射中的所有值。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px); $padding:(top:10px, right:20px, bottom:10px, left:30px); p {     font-size: map-get($font-sizes, "normal"); //18px     @if map-has-key($padding, "right") {         padding-right: map-get($padding, "right");     }     &:after {         content: map-keys($font-sizes) + " "+ map-values($padding) + "";     } } 

更多详细使用:https://sass-lang.com/documentation/modules/map

selector选择器函数

​ 选择符相关函数可对CSS选择进行一些相应的操作,例如:selector-append()可以把一个选择符附加到另一个选择符,selector-unify()将两组选择器合成一个复合选择器。

例如

.header {     background-color: #000;     content: selector-append(".a", ".b", ".c") + '';     content: selector-unify("a", ".disabled") + ''; } 

更多详细使用:https://sass-lang.com/documentation/modules/selector

自检函数

​ 自检相关函数,例如:feature-exists()检查当前Sass版本是否存在某个特性,variable-exists()检查当前作用域中是否存在某个变量,mixin-exists()检查某个mixin是否存在。

例如:

$color:#F00; @mixin padding($left:0, $top:0, $right:0, $bottom:0) {     padding: $top $right $bottom $left; }  .container {     @if variable-exists(color) {         color: $color;     }     @else {         content: "$color不存在";     }     @if mixin-exists(padding) {         @include padding($left: 10px, $right: 10px);     } } 

自检函数通常用在代码的调试上

常见的内置函数就这些,如果这些不能满足你的要求,你也可以自定义函数功能,后面的课程我们会单独讲解,更多课程关注“老姚实战营”。