Sass函数:unit()函数
unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:
>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"
但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外:
>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: 'cm' and 'px*em'.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: '' and 'em'.
>> unit(1px - 1em)
SyntaxError: Incompatible units: 'em' and 'px'.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: 'rem' and 'px'.
>> unit(1px - 1%)
SyntaxError: Incompatible units: '%' and 'px'.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: 'em' and 'cm'.
unit() 函数对于单位运算相对来说也没有规律,而且有些单位也无法整合成一个单位,对于我们在 CSS 中运用中并不适合,比如:
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"
换句话说,上面运算出来的单位,对于在 CSS 中使用将是没有任何意义的。
Sass函数:unit()函数的更多相关文章
- Sass函数--列表函数
列表函数简介 列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join ...
- Sass函数--数字函数
数字函数简介 Sass 中的数字函数提要针对数字方面提供一系列的函数功能: percentage($value):将一个不带单位的数转换成百分比值: round($value):将数值四舍五入,转换成 ...
- Sass函数--字符串函数
Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: ● 字符串函数 ● 数字函数 ...
- Sass函数--颜色函数--Opacity函数
Opacity函数简介 在 CSS 中除了可以使用 rgba.hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而 ...
- Sass函数--颜色函数--RGB颜色函数
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1. ...
- 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数
1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js -- rules ) A. 不检测 缩进 ...
- Sass函数--颜色函数--HSL函数
HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(ligh ...
- Sass:RGB颜色函数-Red()、Green()、Blue()函数
Red() 函数 red() 函数非常简单,其主要用来获取一个颜色当中的红色值.假设有一个 #f36 的颜色,如果你想得到 #f36 中的 red 值是多少,这个时候使用 red() 函数就能很简单获 ...
- Sass函数:数字函数-min()函数、max()函数
min()函数 min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数: >> min(1,2,1%,3,300%) 1% >> min(1px,2 ...
随机推荐
- 第五周作业—N42-虚怀若谷
一.查找/etc目录下大于1M且类型为普通文件的所有文件 [root@centos7 ~]# find /etc -type f -size +1M -exec ls -lh {} \; -r--r- ...
- 20180715-Java String类
public class StringDemo{ public static void main(String args[]){ char[] helloArray = {'h','e','l','l ...
- QT | 第二章 基本语法
''' @Modify Time @Author ------------ ------- python基本语法 2019/10/26 8:16 laoalo ''' import functools ...
- 后端技术杂谈9:先搞懂Docker核心概念吧
本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...
- C#-概念-基础类库:基础类库
ylbtech-C#-概念-基础类库:基础类库 基础类库 (BCL) 是微软所提出的一组标准库可提供.NET Framework所有语言使用. 随着 Windows 以及 .NET Framework ...
- CDN-template
ylbtech-CDN: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 9.返回顶部 10.返 ...
- 130、TensorFlow操作多个计算图
# Programming with multiple graphs # 当训练一个模型的时候一个常用的方式就是使用一个图来训练你的模型 # 另一个图来评价和计算训练的效果 # 在许多情况下前向计算和 ...
- 同余dp
先验知识: 余数的计算公式:c = a -⌊ a/b⌋ * b 其中,⌊ ⌋为向下取整运算符,向下取整运算称为Floor,用数学符号⌊ ⌋表示 题目: Consider an arbitrary se ...
- SEC3 - MySQL常见命令
1.查看当前所有的数据库 show databases; 2. 打开指定的库名 use 库名称: 3.查看当前库中所有的表 show tables; 4. 查看其他库的所有表 show tables ...
- [LeetCode] 477. Total Hamming Distance(位操作)
传送门 Description The Hamming distance between two integers is the number of positions at which the co ...