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

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

推荐阅读

uri
ListView简单使用

先上效果：主要实现了Listview的绑定和点击事件。项目资源结构如下：先创建一个动物类，用来装载数据：Animal类如下：packagecom.example.simplelis ... [详细]

蜡笔小新 2024-12-20 18:17:25
io
Java 中的不可变集合与同步集合详解

本文将详细探讨 Java 中提供的不可变集合（如 `Collections.unmodifiableXXX`）和同步集合（如 `Collections.synchronizedXXX`）的实现原理及使用方法，帮助开发者更好地理解和应用这些工具。 ... [详细]

蜡笔小新 2024-12-20 15:34:31
io
软件工程课堂测试2

要做一个简单的保存网页界面，首先用jsp写出保存界面，本次界面比较简单，首先是三个提示语，后面是三个输入框，然 ... [详细]

蜡笔小新 2024-12-20 15:00:51
uri
深入理解Java类加载机制与自定义类加载器

本文详细探讨了Java中的ClassLoader类加载器的工作原理，包括其如何将class文件加载至JVM中，以及JVM启动时的动态加载策略。文章还介绍了JVM内置的三种类加载器及其工作方式，并解释了类加载器的继承关系和双亲委托机制。 ... [详细]

蜡笔小新 2024-12-20 12:58:21
io
Python3 中使用 lxml 模块解析 XPath 数据详解

XPath 是一种用于在 XML 文档中查找信息的路径语言，同样适用于 HTML 文件的搜索。本文将详细介绍如何利用 Python 的 lxml 模块通过 XPath 技术高效地解析和抓取网页数据。 ... [详细]

蜡笔小新 2024-12-20 11:23:22
uri
springMVC JRS303验证

springMVC JRS303验证 ... [详细]

蜡笔小新 2024-12-20 09:07:39
io
Java中XYSeries.setLineColor()方法详解与应用实例

本文详细介绍了Java库XChart中的XYSeries类下的setLineColor()方法，并提供了多个实际应用场景的代码示例。 ... [详细]

蜡笔小新 2024-12-20 08:27:06
io
CentOS 6.8 上安装 Oracle 10.2.0.1 的常见问题及解决方案

本文记录了在 CentOS 6.8 系统上安装 Oracle 10.2.0.1 数据库时遇到的问题及解决方法，包括依赖库缺失、操作系统版本不兼容、用户权限不足等问题。 ... [详细]

蜡笔小新 2024-12-20 17:19:23
io
使用C#与SQL Server进行基础数据库交互

本文档介绍了如何在Visual Studio 2010环境下，利用C#语言连接SQL Server 2008数据库，并实现基本的数据操作，如增删改查等功能。通过构建一个面向对象的数据库工具类，简化了数据库操作流程。 ... [详细]

蜡笔小新 2024-12-20 14:11:19
java
处理具有相同名称的JAXB对象：Java中的复杂情况

本文探讨了如何在Java中使用JAXB解组两个具有相同名称但不同结构的对象。我们将介绍一个抽象类Bar及其具体实现，并展示如何正确地解析XML文档以获取正确的对象实例。 ... [详细]

蜡笔小新 2024-12-20 12:22:08
io
网页文章访问计数实现

本文介绍了如何通过在数据库表中增加一个字段来记录文章的访问次数，并提供了一个示例方法用于更新该字段值。 ... [详细]

蜡笔小新 2024-12-20 12:12:15
io
一个登陆界面

预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]

蜡笔小新 2024-12-20 09:57:07
io
Java 中重写与重载的区别

本文详细解析了 Java 编程语言中重写（Override）和重载（Overload）的概念及其主要区别，帮助开发者更好地理解和应用这两种多态性机制。 ... [详细]

蜡笔小新 2024-12-20 09:23:33
uri
2017-2018年度《网络编程与安全》第五次实验报告

本报告详细记录了2017-2018学年《网络编程与安全》课程第五次实验的具体内容、实验过程、遇到的问题及解决方案。 ... [详细]

蜡笔小新 2024-12-20 08:38:38
io
iOS BLE应用后台持续扫描与连接问题分析

本文探讨了在iOS平台上开发BLE（蓝牙低功耗）应用程序时遇到的挑战，特别是如何实现应用在后台模式下仍能持续扫描并连接蓝牙设备。文章提供了具体的配置方法和常见的问题解决方案。 ... [详细]

蜡笔小新 2024-12-20 03:50:11

yangerzhou

Tags | 热门标签

RankList | 热门文章