WENIGER: Von Variable abziehen

Question

Mit LESS, wie kann ich Werte mit "px" am Ende der Variablen subtrahieren. Ich habe die folgende Variable:

@bpMobile: 600px 

Was ich tun möchte, ist dies subtrahieren von 1px

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

Wie kann ich das erreichen mit weniger?

Answer 1

Sie können dafür immer die calc function verwenden.

Syntax: calc(expression)

ZB:

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

Here sind die Liste von Browser, der diese Funktion

EDIT 1 unterstützt:

Sie können es in der Verwendung folgende zwei Möglichkeiten:

WENIGER Eingang:

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

CSS Output:

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

2. Weg: Weniger Input:

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

CSS Output:

max-width: calc(599px); 

Mit der ersten Option werden die calc-Argumente maskiert, um zu verhindern, dass sie bei der Kompilierung ausgewertet werden. Die Werte bleiben vollständig statisch, bis sie vom Client ausgewertet werden.

Mit der zweiten Option wird der berechnete Wert beim Kompilieren ausgewertet. Und es wäre die gleich wie

max-width: @bpMobile - 1px; 

was zur Folge haben wird in

max-width: 599px; 

Answer 2

Das Problem ist nicht die mathematische Funktion ist, dann ist es, dass Sie versuchen, es Abfrage in einem Medium zu verwenden. The docs sagen, dass Sie die gesamte Abfrage eine Variable zu machen brauchen:

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

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

@media @singleQuery { 
} 

Answer 3

Das Update von freejosh für mich auf lesscss 1.7.0 funktioniert nicht.

Was funktioniert der Trick einfach geklam- mert in einer Medien-Abfrage um jede Variable oder Berechnung ist das Hinzufügen:

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

oder

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

Answer 4

Sorry für die Beantwortung dieses spät, aber ich hatte genau dieses Problem und es scheint WENIGER ist wählerisch über den Abstand. Sie benötigen auch () um Ihre Berechnung.

arbeitet Dies wird nicht:

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

Dies wird jedoch (den Raum zwischen den Variablen und der Ziffer bemerken):

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