当前位置: 开发笔记 > 编程语言 > 正文

2-2Sass的函数功能-字符串与数字函数

作者：yangerzhou | 来源：互联网 | 2023-05-19 17:24

Sass的函数简介在Sass中除了可以定义变量，具有@extend、%placeholder和mixins等特性之外，还自备了一系列的函数功能。其主要包括：字符串函数数字函数列表函数颜色函

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

推荐阅读

text
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
select
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
select
如何使用PHP向系统日历中添加事件？

本文介绍了如何使用PHP向系统日历中添加事件的方法，通过使用PHP技术可以实现自动添加事件的功能，从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点，以及使用web技术实现自动添加事件的优势。 ... [详细]

蜡笔小新 2023-12-14 21:02:28
settings
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
select
【openwrt】设备mt7628关于wan侧eth0.1 mac地址固定的问题

本文讨论了在openwrt-17.01版本中，mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下，而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等，生成后的mac地址会保存在/etc/config/network下。 ... [详细]

蜡笔小新 2023-12-12 17:47:48
jsp
Linked List Random Node

Givenasinglylinkedlist,returnarandomnode'svaluefromthelinkedlist.Eachnodemusthavethe s ... [详细]

蜡笔小新 2023-12-12 09:09:15
select
Oracle存储过程写法小例子及已命名的异常

本文介绍了Oracle存储过程的基本语法和写法示例，同时还介绍了已命名的系统异常的产生原因。 ... [详细]

蜡笔小新 2023-12-11 15:10:15
select
数组或散列中的正则表达式排序 - Regex in array or hash - sorting

Ihaveaworkfolderdirectory.我有一个工作文件夹目录。holderDir.glob(*)>holder[ProjectOne, ... [详细]

蜡笔小新 2023-12-10 12:41:53
jsp
2015年九月八日js学习总结及相关知识点

本文介绍了2015年九月八日的js学习总结及相关知识点，包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后，并且对语句和注释的使用进行了说明。 ... [详细]

蜡笔小新 2023-12-10 11:10:08
runtime
ShiftLeft：将静态防护与运行时防护结合的持续性安全防护解决方案

ShiftLeft公司是一家致力于将应用的静态防护和运行时防护与应用开发自动化工作流相结合以提升软件开发生命周期中的安全性的公司。传统的安全防护方式存在误报率高、人工成本高、耗时长等问题，而ShiftLeft提供的持续性安全防护解决方案能够解决这些问题。通过将下一代静态代码分析与应用开发自动化工作流中涉及的安全工具相结合，ShiftLeft帮助企业实现DevSecOps的安全部分，提供高效、准确的安全能力。 ... [详细]

蜡笔小新 2023-12-10 10:45:15
runtime
禅道测试管理工具的介绍及搭建方法

本文介绍了禅道作为一款国产开源免费的测试管理工具的特点和功能，并提供了禅道的搭建和调试方法。禅道是一款B/S结构的项目管理工具，可以实现组织管理、后台管理、产品管理、项目管理和测试管理等功能。同时，本文还介绍了其他软件测试相关工具，如功能自动化工具和性能自动化工具，以及白盒测试工具的使用。通过本文的阅读，读者可以了解禅道的基本使用方法和优势，从而更好地进行测试管理工作。 ... [详细]

蜡笔小新 2023-12-09 19:03:20
jsp
Foundation框架中常用结构体和类的介绍

本文介绍了Foundation框架中一些常用的结构体和类，包括表示范围作用的NSRange结构体的创建方式，处理几何图形的数据类型NSPoint和NSSize，以及由点和大小复合而成的矩形数据类型NSRect。同时还介绍了创建这些数据类型的方法，以及字符串类NSString的使用方法。 ... [详细]

蜡笔小新 2023-12-09 17:56:07
select
使用FLASK REST API的机器学习模型

在本教程中，我们将看到如何使用FLASK制作第一个用于机器学习模型的RESTAPI。我们将从创建机器学习模型开始。然后，我们将看到使用Flask创建AP ... [详细]

蜡笔小新 2023-10-17 19:13:12
select
利用PyTorch快速实现分类任务

关于如何快速定义自己的数据集，可以参考我的前一篇文章PyTorch中快速加载自定义数据（入门）_晨曦473的博客-CSDN博客刚开始学习P ... [详细]

蜡笔小新 2023-10-17 18:12:24
python
Python 可视化 | Seaborn5 分钟入门 (六)——heatmap 热力图

微信公众号：「Python读财」如有问题或建议，请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seabo ... [详细]

蜡笔小新 2023-10-17 17:48:15

yangerzhou

Tags | 热门标签

RankList | 热门文章