Less编译结果中除法未被执行?

    先来看一个例子,编写了一个以下的common.less文件,用来进行针对不同机型的字体适配,less代码如下,

//使用普通网页打开时,直接按照font-size:50px显示即可
html {
  font-size: 50px;
}

// 使用@media设置常见的屏幕尺寸及其HTML字体font-size属性值大小
//屏幕的划分份数:15份
@screennums: 15;

//屏幕尺寸320px
@media screen and (min-width: 320px) {
  html {
    // 注意:此次除法运算如果不加(),可能不会执行该运算
    font-size: 320px / @screennums;
  }
}
//屏幕尺寸360px
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / @screennums;
  }
}

//屏幕尺寸375px
@media screen and (min-width: 375px) {
  html {
    font-size: 375px / @screennums;
  }
}

//屏幕尺寸384px
@media screen and (min-width: 384px) {
  html {
    font-size: 384px / @screennums;
  }
}

//屏幕尺寸400px
@media screen and (min-width: 400px) {
  html {
    font-size: 400px / @screennums;
  }
}

//屏幕尺寸414px
@media screen and (min-width: 414px) {
  html {
    font-size: 414px / @screennums;
  }
}

//屏幕尺寸424px
@media screen and (min-width: 424px) {
  html {
    font-size: 424px / @screennums;
  }
}

//屏幕尺寸480px
@media screen and (min-width: 480px) {
  html {
    font-size: 480px / @screennums;
  }
}

//屏幕尺寸540px
@media screen and (min-width: 540px) {
  html {
    font-size: 540px / @screennums;
  }
}

//屏幕尺寸720px
@media screen and (min-width: 720px) {
  html {
    font-size: 720px / @screennums;
  }
}

//屏幕尺寸750px
@media screen and (min-width: 750px) {
  html {
    font-size: 750px / @screennums;
  }
}

    接着,使用less.js进行less文件的编译处理,
Less编译结果中除法未被执行?

    得到如下CSS代码文件:common.css,

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 320px / 15;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / 15;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 375px / 15;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 384px / 15;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 400px / 15;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 414px / 15;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 424px / 15;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 480px / 15;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 540px / 15;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 720px / 15;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 750px / 15;
  }
}

    这段代码显然是有问题的,因为当CSS遇到除法时,并不知道如何进行处理,(特殊情况例如:设置字体样式时,font:12px/1.5 宋体;),所以生成的CSS代码是无效的。

    然后我们看一下官方文档给出的解释,先来看一段官网给出的数学运算概述,
Less编译结果中除法未被执行?
    [Less有一些已经重构的数学选项,它们提供了一个中间特征(in-between feature),它(中间特征)在预置的“严格数学(strictMath)”设置之间——总是需要一个括号(parentheses),并且,默认情况下,它在任何情况下都可以进行数学运算。 ]
Less编译结果中除法未被执行?
    [为了减少与CSS之间的冲突,(为了)可以*地在值之间使用/,现在有一种严格的数学模式,仅仅需要为除法添加括号(),严格的数学”也被调整以更直观地操作,尽管遗留行为得到了支持。]
    (ˉ▽ˉ;)…,翻译的好烂,大致意思是:只要在使用Less语法进行数学运算时,建议加上一个括号,这样,该运算表达式在任何情况下就都可以执行。下面是官网中给出的一个例子,也对其进行了例证,
Less编译结果中除法未被执行?
    总结: 只有为Less中的出发表达式加上括号(),才是安全的,因为这样它才能在任何情况下成功被执行。下面是common.less修改后的编译结果common.css文件部分内容,
Less编译结果中除法未被执行?

上一篇:响应式布局


下一篇:tinymce-vue的自定义组件,实现多图上传