Hoje eu estava batendo minha cabeça que a propriedade calc () do CSS3 não estava funcionando corretamente em nenhum navegador. Então percebi que estou usando LESS e quaisquer operadores matemáticos entre colchetes seriam calculados e apenas CSS seria analisado pelos navegadores.
Meu problema era:
@asideWidth: 30px;
.post {
width: calc(100% - @asideWidth);
}
Isso estava me dando uma produção de 70%. Horrível. Logo após o momento, eu percebi – qualquer coisa entre colchetes no LESS seria calculado por LESS primeiro. Então eu tive que analisar o cálculo como string de escape para LESS, como:
.post {
width: ~"calc(100% 0 @asideWidth)";
}
Isso também falhou, porque nada dentro dessa string de Escape não seria avaliado. Então eu tive que remover a variável e usar o número real.
.post {
width: ~"calc(100% - 30px)";
}
E tudo passou.