Less aggressive compilation with CSS3 calc

前端 未结 4 1500
臣服心动
臣服心动 2020-11-22 05:18

The Less compilers that I\'m using (OrangeBits and dotless 1.3.0.5) are aggressively translating

body { width: calc(100% - 250px - 1.5em); }
<
相关标签:
4条回答
  • 2020-11-22 05:47

    There is several escaping options with same result:

    body { width: ~"calc(100% - 250px - 1.5em)"; }
    body { width: calc(~"100% - 250px - 1.5em"); }
    body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
    
    0 讨论(0)
  • 2020-11-22 05:49

    There's a tidier way to include variables inside the escaped calc, as explained in this post: CSS3 calc() function doesn't work with Less #974

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

    By using the curly brackets you don't need to close and reopen the escaping quotes.

    0 讨论(0)
  • 2020-11-22 06:04

    A very common usecase of calc is take 100% width and adding some margin around the element.

    One can do so with:

    @someMarginVariable = 15px;
    
    margin: @someMarginVariable;
    width: calc(~"100% - "@someMarginVariable*2);
    width: -moz-calc(~"100% - "@someMarginVariable*2);
    width: -webkit-calc(~"100% - "@someMarginVariable*2);
    
    0 讨论(0)
  • 2020-11-22 06:14

    Less no longer evaluates expression inside calc by default since v3.00.


    Original answer (Less v1.x...2.x):

    Do this:

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

    In Less 1.4.0 we will have a strictMaths option which requires all Less calculations to be within brackets, so the calc will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.

    0 讨论(0)
提交回复
热议问题