使用CSS3 calc进行不太积极的编译

css CSS

伽罗老丝

2020-03-23

我正在使用的Less编译器（OrangeBits和dotless 1.3.0.5）正在积极地进行翻译

body { width: calc(100% - 250px - 1.5em); }

进入

body { width: calc(-151.5%); }

这显然是不希望的。我想知道是否有一种方法可以通知Less编译器在编译过程中实质上忽略该属性。我搜索了Less文档和两个编译器文档，但找不到任何东西。

更少或更少的编译器是否支持此功能？

如果没有，是否有CSS扩展器呢？

第2632篇《使用CSS3 calc进行不太积极的编译》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
乐 2020.03.23

calc的一个非常常见的用例是采用100％的宽度并在元素周围增加一些边距。

可以这样做：

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
村村 2020.03.23

calc由于，默认情况下，Less不再计算内部表达式v3.00。

原始答案（Less v1.x...2.x）：

做这个：

body { width: calc(~"100% - 250px - 1.5em"); }

在Less 1.4.0中，我们将提供一个strictMaths选项，要求所有Less计算都放在方括号内，因此calc“开箱即用”即可使用。这是一个重大突破，是一个选择。1.4.0的早期测试版默认情况下启用此选项。发行版本默认情况下将其关闭。

伽罗 2020.03.23

如本文中所述，有一种更整齐的方式将变量包含在转义的calc中：CSS3 calc（）函数不适用于Less＃974

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

通过使用大括号，您无需关闭并重新打开转义引号。

老丝阿飞 2020.03.23

有几种转义选项，结果相同： 

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android