Compilação menos agressiva com CSS3 calc

336

Os compiladores Menos que estou usando ( OrangeBits e dotless 1.3.0.5 ) estão traduzindo agressivamente

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

para dentro

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

O que obviamente não é desejado. Gostaria de saber se existe uma maneira de sinalizar para o compilador Less para ignorar essencialmente o atributo durante a compilação. Pesquisei a documentação Menos e a documentação de ambos os compiladores e não consegui encontrar nada.

O compilador Less or a Less suporta isso?

Caso contrário, existe um extensor CSS que sim?

css compilation less css-calc Nick Babcock
fonte
9
Tem certeza de que não deseja um compilador menos agressivo?
Fiatjaf
Também tenho muita certeza de querer que o compilador seja mais agressivo! (a negação dupla no comentário anterior me confundiu;)) (por isso o meu voto, bem como para o bom recurso abaixo)
Andreas Dietrich

Respostas:

530

Menos não avalia mais a expressão interna calcpor padrão desde então v3.00.

Resposta original ( Less v1.x...2.x):

Faça isso:

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

No Less 1.4.0, teremos uma strictMathsopção que exige que todos os cálculos do Less estejam entre colchetes, para calcque funcione "fora da caixa". Esta é uma opção, pois é uma grande mudança de ruptura. Os betas anteriores da 1.4.0 tinham essa opção ativada por padrão. A versão de lançamento está desativada por padrão.

Luke Page
fonte
2
Observe que, se você estiver compilando menos com o intervalo do twitter, ele ignora essa fuga . Pelo menos na hora de escrever este comentário.
Attila Fulop
11
Eu apenas tentei calc(100% - 50px)no less.css 1.4.0 e o resultado foi calc(50%). O ~"..."truque impressionante continua a funcionar, mas estou confuso com a afirmação "pronta para uso", que me faz pensar que o descrito acima funcionaria. Luke, como o suporte à calcmudança no Less 1.4.0? Obrigado!
Brian M. Caça
2
A questão é por que o less.js tentou calcular isso em primeiro lugar? Ele deve gerar um erro para "100% - 250px", pois não pode calcular uma resposta sensata.
MPEN
72
Para futuros leitores, você também pode escapar apenas do operador, permitindo que você use variáveis ​​também. Exemplo:calc(@somePercent ~"-" @someLength)
0b10011 7/08/2014
10
Em vez de menos calcular mal isso ou gerar um erro, por que ele não consegue perceber o que o usuário está tentando fazer e deixá-lo em paz? Obviamente, uma porcentagem e um valor de pixel não podem ser calculados juntos em menos.
Dfmiller
37

Um caso de uso muito comum do calc é usar 100% de largura e adicionar alguma margem ao redor do elemento.

Pode-se fazer isso com:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
Sebastien Lorber
fonte
-o-calc- ainda não é suportado .
outro
28

Existem várias opções de escape com o mesmo resultado: 

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

Existe uma maneira mais organizada de incluir variáveis ​​dentro do calc escapado, conforme explicado neste post: A função CSS3 calc () não funciona com Less # 974

@variable: 2em;

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

Usando os colchetes, você não precisa fechar e reabrir as aspas que escapam.

brohr
fonte