zoukankan      html  css  js  c++  java
  • 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 中使用将是没有任何意义的。

  • 相关阅读:
    thymeleaf 模板使用 之 解决因HTML标签未闭合引起的错误
    Spring MVC 拦截器
    Spring boot data jpa 示例
    Hibernate 数据库方言
    Springboot 之 静态资源路径配置
    Java 时间不一致
    IntelliJ IDEA 2017.3.2 热加载(Hot Swap)
    IntelliJ IDEA Spring boot devtools 实现热部署
    Python-集合
    Python-文件读写及修改
  • 原文地址:https://www.cnblogs.com/qjuly/p/9114056.html
Copyright © 2011-2022 走看看