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?

— 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

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