Disable LESS-CSS Overwriting calc () [duplicate]

Oprócz użycia wartości ucieczki opisanej w moja inna odpowiedź, możliwe jest również rozwiązanie tego problemu poprzez włączenie ustawienia Strict Math .

Z włączoną ścisłą math, będą przetwarzane tylko te matematyczne, które znajdują się w niepotrzebnych nawiasach, więc Twój kod:

width: calc(100% - 200px);

Będzie działać zgodnie z oczekiwaniami z włączoną opcją strict math.

Jednak , zauważ, że ścisła Matematyka jest stosowana globalnie, nie tylko wewnątrz calc(). Oznacza to, że jeśli mieć:

font-size: 12px + 2px;

Matematyka nie będzie już przetwarzana przez Less - wyświetli font-size: 12px + 2px, co jest oczywiście nieprawidłowym CSS. W nawiasach (wcześniej niepotrzebnych) musisz zawinąć wszystkie matematyczne, które powinny być przetwarzane przez Less:

font-size: (12px + 2px);

Ścisła Matematyka jest dobrą opcją do rozważenia przy rozpoczynaniu nowego projektu, w przeciwnym razie prawdopodobnie będziesz musiał przepisać sporą część bazy kodu. W przypadku najczęstszych przypadków użycia, podejście typu escape string opisane w other answer jest bardziej odpowiednie.

Oto Mixin między przeglądarkami za używanie CSS {[3] } z dowolną właściwością:

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

Przykładowe użycie:

.calc(width; "100% - 200px");

I wyjście CSS:

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

Kod tego przykładu: http://codepen.io/patrickberkeley/pen/zobdp

Przykład dla łańcucha znaków ze zmienną:

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

Kompiluje do

div {
    height: calc(100vh - 10px );
}

Rozwiązania Fabricio działają dobrze.

Bardzo powszechnym zastosowaniem calc jest dodanie 100% szerokości i dodanie marginesu wokół elementu.

Można to zrobić za pomocą:

@someMarginVariable: 15px;

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

Lub można użyć mixin jak:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}