scss-函数

Shisui 发布于2019-04-23 13:15 / 2451人阅读

摘要：本身带有大量的内置函数，具体可以参阅官网函数模块。语法开头声明一个函数，函数内部使用返回一个值，参数可以省略。是一个内置函数，可以从列表中找到对应索引的值索引是从开始的，与大多数编程语言从开始不同。

　　在scss中除了可以定义变量，具有@extend和@mixins等特性之外，还自备了一系列的函数功能。

　　scss本身带有大量的内置函数，具体可以参阅官网函数模块。

　　一、字符串函数

unquote($string)：只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
quote($string)：只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

　　二、数字函数

percentage($value)：将一个不带单位的数转换成百分比值，如果转换的值是一个带有单位的值，那么在编译的时候会报错误信息：
round($value)：将数值四舍五入，转换成一个最接近的整数，可以携带单位的任何数值。
ceil($value)：将大于自己的小数转换成下一位整数；将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身1的整数。也就是只做入，不做舍的计算
floor($value)：将一个数去除他的小数部分；floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值。

　　三、List函数

length($list)：返回一个列表的长度值；
nth($list, $n)：返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。

　　四、自定义函数

　　可能有时候，内置的函数并不能够完全满足我们的需求，那么我们也自定义函数。

　　语法：

@function function-name($args) { 
  @return value-to-be-returned; 
}

　　@function开头声明一个函数，函数内部使用@return返回一个值，参数可以省略。总体来讲scss中的函数和JavaScript中的函数大同小异，并且具备某些ES2015函数的特点。函数可以放置在想要使用函数返回值的地方，scss代码实例如下

div { 
  font-size: font-size($args); 
}

　　特别说明:scss函数名中的中划线和下划线是等同的，font-size和font_size指向同一个函数。

@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(3, 8); 
}

　　编译后的css代码如下：

.col-3 {
  width: 37.5%;
}

　　默认参数:scss代码实例如下:

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(); 
}

　　参数名称后面跟着一个冒号，冒号后面就是规定的默认参数值；函数调用时，对应的参数没有传递值，那么就使用默认参数值，上面代码编译结果如下:

.col-3 {
  width: 37.5%;
}

　　再来看一段scss代码实例:

@function column-width($col:3, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　上面的代码会报错，函数调用时只传递了一个参数，但是函数声明时规定了两个参数，并且第二个参数没有默认值，也就是说函数调用时所传递的参数必须和声明时规定的参数对应起来。

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　传递的参数会覆盖默认的参数，所以4会覆盖3，第二个参数使用默认值。编译结果如下:

.col-3 {
  width: 50%;
}

　　函数rest参数:

　　给函数传递的参数个数也许不是固定的，或者不能预知为函数传递参数的个数。代码实例如下:

@function column-width($index, $widths...){ 
  @return nth($widths, $index); 
}
.col-3 { 
  width: column-width(3, 25%, 50%, 75%, 100%); 
}

　　rest参数的形式是参数名称后面跟三个点。上面代码中，3会传递给$index，后面的剩余参数会都传递给$widths（$widths生成一个list列表）。nth()是一个内置函数，可以从列表中找到对应索引的值（索引是从1开始的，与大多数编程语言从0开始不同）。上面代码编译结果如下:

.col-3 {
  width: 75%;
}

　　文本超出范围，显示省略号

/*文本格式化，超出范围，显示省略号*/
@mixin text-overflow($width:100%,$display:block) {
  width: $width;
  display: $display;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

　　调用@include text-overflow();也可以自己传入参数，display为block或inline-block才能达到预期的效果

　　编译的css代码如下：

    width: 100%;
    display: block;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1628.html

前端之Sass/Scss实战笔记

摘要：有两种语法规则目前新的语法规则从开始被称为时髦的它是语法的的拓展级，就是说每一个语法正确的文件也是合法的文件，文件使用作为拓展名。备注注意源文件和目标文件之间是冒号，与编译命令中为空格不同。 Introduction Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 SCSS( 时髦的css（Sassy CSS）),它是css3语法的的拓展级...

Sike 2019-08-28 18:17 评论0 收藏0
CSS外挂：Sass的那些装逼函数(function)

摘要：，返回的最大值。非相同的单位，报错编译为，返回一个随机数。函数函数称为三元条件函数，主要因为他和中的三元判断非常的相似。颜色函数暂时还没用到过。函数，根据三个值创建一个颜色将一个颜色根据透明度转换成颜色。前戏：前几篇文章其实都是些基础必备的，什么变量、继承、占位符、混合宏...这回来高级点的，玩玩Sass 自带的一些函数...有字符串函数(String Functions)、数字函数...

booster 2019-08-30 12:56 评论0 收藏0
挑逗Bootstrap4源代码 - Grid篇（上）

摘要：候补，分别代表两种宽度之间和仅在一种宽度下的情形。这里是一个很重要的变化，大家可以注意到，这里的变成了，这也是主要的改进之一，这个基础构建的变化意味着整个框架在很大程度上都会建立在的基础上滚蛋吧。本文所引用的版本为Bootstrap 4 Beta版，阅读者请先下载好相关源文件。时光荏苒，若后续版本代码发生变化，将看心情进行更新补充。如果你觉得本文不错，欢迎评论支持，如需转载请标明...

wizChen 2019-08-29 13:23 评论0 收藏0
SASS知识点

SASS介绍 css预处理器。其实还有用的很多的less，stylus。SASS支持所有css语法基础的文件命名方法以_开头准备工具 SASS编译工具?官方下载地址，下载对应版本用法：将项目中的css文件夹拖入Koala 创建sass文件后缀demo.sass (Koala会自动编译成demo.css) demo.html正常引入demo.css 文件 SASS基础知识变量 demo...

jhhfft 2019-08-29 13:55 评论0 收藏0
CSS、Sass、Scss，以及sass和scss的区别

摘要：即元素脱离文档流的布局，在页面的任意位置显示绝对定位脱离文档流的布局，遗留下来的空间由后面的元素填充。相对定位不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。 1、描述 CSS 指层叠样式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理...

caozhijian 2019-08-30 11:16 评论0 收藏0