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()函数的更多相关文章

  1. Sass函数--列表函数

    列表函数简介 列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值  join ...

  2. Sass函数--数字函数

    数字函数简介 Sass 中的数字函数提要针对数字方面提供一系列的函数功能: percentage($value):将一个不带单位的数转换成百分比值: round($value):将数值四舍五入,转换成 ...

  3. Sass函数--字符串函数

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

  4. Sass函数--颜色函数--Opacity函数

    Opacity函数简介 在 CSS 中除了可以使用 rgba.hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而 ...

  5. Sass函数--颜色函数--RGB颜色函数

    RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1. ...

  6. 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数

    1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进 ...

  7. Sass函数--颜色函数--HSL函数

    HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(ligh ...

  8. Sass:RGB颜色函数-Red()、Green()、Blue()函数

    Red() 函数 red() 函数非常简单,其主要用来获取一个颜色当中的红色值.假设有一个 #f36 的颜色,如果你想得到 #f36 中的 red 值是多少,这个时候使用 red() 函数就能很简单获 ...

  9. Sass函数:数字函数-min()函数、max()函数

    min()函数 min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数: >> min(1,2,1%,3,300%) 1% >> min(1px,2 ...

随机推荐

  1. 如何将DynamoDB的数据增量迁移到表格存储

    Amazon DynamoDB是一个完全托管的NoSQL数据库服务,可以提供快速的.可预期的性能,并且可以实现无缝扩展.由于DynamoDB并可以根据实际需求对表进行扩展和收缩,这个过程既不需要停止对 ...

  2. Web截屏插件

    官方网站:http://www.ncmem.com 官方博客:http://www.cnblogs.com/xproer 产品首页:http://www.ncmem.com/webplug/scppr ...

  3. 1208E Let Them Slide

    题目大意 给你n个序列,每个一行 每个序列是可以左右移动的 对于每一列问在随意左右移动这些序列的情况下 这一列的每个数的和最大是多少 分析 对于每个序列分为两种情况 [1]长度小于长度的一半 我们发现 ...

  4. Mac下用命令行压缩和解压rar文件的方法

    废话不多说,直接进入主题 第一步:下载RAR工具包,根据自己需要下载相对应的版本 第二步:解压对应的压在的压缩包rarosx-5.4.0.tar.gz(我下载的是5.4.0版本) 第三步:从终端进入到 ...

  5. Linux Weblogic部署web项目(war包)

    第一步,启动并访问weblogic,进入登录页面 第二步,进入主页面,开始部署项目 第三步,上载项目war包 选择需要上载的本地war包 第四步,开始项目配置 继续下一步 选择红色标记的配置 第五步, ...

  6. vue项目运行时出现的问题(less、vue poackages version)

    今天运行项目,项目一直好好的却突然运行时报错,如下: 是引入文件报错问题,回头查看了一下文件在main.js的引入: import '@/assets/styles/custom.less'; 文件引 ...

  7. 把Notepad++的tab设置为四个空格

    在7.1版本以及以后 设置->首选项->Language 勾选Repalce by space 在7.1版本以前 设置->首选项->制表符设置 右侧,转为空格,勾选上 参考: ...

  8. 2019/11/09 TZOJ

    1001 Interesting Integers http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail& ...

  9. 【python】 全角半角转换

    以输入为GB18030编码字符串为例: #把全角字符串转半角 def tobanjiao(string): ustring = string.decode('GB18030') rstring = & ...

  10. Mac002--Git安装

    Mac--Git安装 注意:在安装Git前,可先安装homebrew,应用brew命令安装Git即可. 一.Mac 安装homebrew 参考博客:https://blog.csdn.net/yuex ...