有没有办法在 Less 中为 ~ 运算符使用变量,例如 ~"calc(100% - @spacing)";
Posted
技术标签:
【中文标题】有没有办法在 Less 中为 ~ 运算符使用变量,例如 ~"calc(100% - @spacing)";【英文标题】:Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)"; 【发布时间】:2012-12-26 02:29:41 【问题描述】:有没有办法在less~
运算符中使用变量,比如
~"calc(70% - @spacing)";
当我尝试过它时,它只适用于静态值,例如
~"calc(70% - 10px)";
我可以在将字符串设置为属性之前获取要评估的字符串吗?
【问题讨论】:
【参考方案1】:要禁用 LESS 在发现两个数值之间的 -
但仍能使用变量时自动执行的计算,您可以编写以下内容之一:
1) 只对触发计算的运算符进行转义,像平常一样使用变量
@padding: 20px;
body
padding: calc(100% ~"-" @padding);
2) 转义整个表达式并使用@padding
表示法插入变量
@padding: 20px;
body
padding: ~"calc(100% - @padding)";
我更喜欢第二个版本,因为它类似于 javascript's template literals 并且看起来更干净一些,但无论哪种方式都可以。
两种解决方案都禁用自动 Less 计算并编译为正确的结果:
body
padding: calc(100% - 20px);
【讨论】:
这很有启发性以上是关于有没有办法在 Less 中为 ~ 运算符使用变量,例如 ~"calc(100% - @spacing)";的主要内容,如果未能解决你的问题,请参考以下文章
有没有办法使用三元运算符 - 或类似的方法 - 来选择要分配的变量?