Obliczę szerokość w jakimś elemencie od procentu do piksela, więc pomniejszę o -10px, używając opcji LESS i calc () . To jest możliwe?
div {
span {
width:calc(100% - 10px);
}
}
Używam CSS3, calc()
więc to nie działa:calc(100% - 10px)
Przykład: jeśli 100% = 500px, czyli szerokość = 490px (500-10);
Zrobiłem demo do testów: http://jsfiddle.net/4DujZ/55/
więc dopełnienie powie: 5 (10px / 2) przez cały czas, gdy zmieniam rozmiar.
Czy mogę to zrobić MNIEJ ? Wiem, jak to zrobić w jQuery i prostym CSS, takim jak dopełnienie marginesów lub jeszcze ... ale spróbuję działać w LESS zcalc()
div
lubspan
.Odpowiedzi:
Możesz uciec przed
calc
argumentami, aby zapobiec ich ocenie podczas kompilacji.Korzystając z twojego przykładu, po prostu otoczysz argumenty, na przykład:
Demo: http://jsfiddle.net/c5aq20b6/
Uważam, że używam tego na jeden z następujących trzech sposobów:
Podstawowe ucieczki
Wszystko wewnątrz
calc
argumentów jest zdefiniowane jako ciąg i jest całkowicie statyczne, dopóki nie zostanie ocenione przez klienta:MNIEJ Wejście
Wyjście CSS
Interpolacja zmiennych
Możesz wstawić zmienną LESS do ciągu:
MNIEJ Wejście
Wyjście CSS
Mieszanie wartości ucieczki i skompilowanych
Możesz chcieć zmienić wartość procentową, ale idź dalej i oceń coś na kompilacji:
MNIEJ Wejście
Wyjście CSS
Źródło: http://lesscss.org/functions/#string-functions-escape .
źródło
Myślę, że
width: -moz-calc(25% - 1em);
właśnie tego szukasz. Możesz też poszukać tego łącza w celu uzyskania dalszej pomocyźródło
Lub możesz użyć atrybutu margin w następujący sposób:
źródło
Spróbuj tego :
źródło