LESS: Odejmij od zmiennej

Question

Używając LESS, jak mogę odjąć wartości z "px" na końcu zmiennej. Mam następujące zmienne:

@bpMobile: 600px 

Co chcę zrobić, to odjąć to przez 1px

@media only screen and (max-width: @bpMobile - 1px) { 
} 

W jaki sposób można to osiągnąć z mniej?

Answer 1

Do tego celu zawsze można użyć calc function.

Składnia: calc(expression)

Np

abc { 
    width:calc(100%-20px) 
} 

Here to lista przeglądarki, która obsługuje tę funkcję

EDIT 1:

można go używać w następujące dwa sposoby:

MNIEJ Wejście:

@bpMobile: 600px; 
max-width: calc(~'@{bpMobile} - 1px'); 

CSS wyjściowa:

max-width: calc(600px - 1px); 

2 sposób: Mniej Wejście:

@bpMobile: 600px; 
max-width: calc(@bpMobile - 1px); 

CSS wyjściowa:

max-width: calc(599px); 

W pierwszej opcji argumenty calc są chronione przed zmianami, aby zapobiec ich ocenie podczas kompilacji. Wartości pozostaną całkowicie statyczne, dopóki nie zostaną ocenione przez klienta.

W przypadku drugiej opcji wartość Calc zostanie obliczona podczas kompilacji. I byłoby tak samo jak

max-width: @bpMobile - 1px; 

co spowoduje

max-width: 599px; 

Answer 2

Problemem nie jest funkcja matematyki, jest to, że starasz się go używać w zapytaniu mediów. The docs powiedzieć, że trzeba zrobić całe zapytanie jedną zmienną:

@bpMobile: 600px; 
@bpMobile1: @bpMobile - 1px; 

@singleQuery: ~"only screen and (max-width: @{bpMobile1})"; 

@media @singleQuery { 
} 

Answer 3

Rozwiązaniem od freejosh nie działa dla mnie na lesscss 1.7.0.

Co robi trick jest po prostu dodając nawiasach wokół każda zmienna lub obliczeń wewnątrz media-zapytanie:

@media only screen and (max-width: (@bpMobile - 1px)) { ... } 

lub

@other: @bpMobile - 1px; 
@media only screen and (max-width: (@other)) { ... } 

Answer 4

żal odpowiadając tak późno, ale miałem ten problem bardzo i wydaje się, że LESS jest wybredny w kwestii odstępów. Potrzebujesz również () wokół swoich obliczeń.

To nie zadziała:

@media screen and (max-width: (@widthSmall-2)) { } 

Jednak to będzie (zauważ przestrzeń pomiędzy zmienną a cyfra):

@media screen and (max-width: (@widthSmall - 2)) { }