Obliczanie szerokości z procent na piksel, a następnie minus po pikselu w MNIEJ CSS

101

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()

l2aelba
źródło
1
Zasadniczo nie stylizuj selektorów, które nie mają semantyki , takich jak divlub span.
Pavlo
1
Oto mixin dla różnych przeglądarek, który napisałem w celu użycia kalkulatora na dowolnej właściwości css: stackoverflow.com/a/24790931/916734
Patrick Berkeley.

Odpowiedzi:

247

Możesz uciec przed calcargumentami, aby zapobiec ich ocenie podczas kompilacji.

Korzystając z twojego przykładu, po prostu otoczysz argumenty, na przykład:

calc(~'100% - 10px')

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 calcargumentów jest zdefiniowane jako ciąg i jest całkowicie statyczne, dopóki nie zostanie ocenione przez klienta:

MNIEJ Wejście

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

Wyjście CSS

div > span {
  width: calc(100% - 10px);
}

Interpolacja zmiennych

Możesz wstawić zmienną LESS do ciągu:

MNIEJ Wejście

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

Wyjście CSS

div > span {
  width: calc(100% - 10px);
}

Mieszanie wartości ucieczki i skompilowanych

Możesz chcieć zmienić wartość procentową, ale idź dalej i oceń coś na kompilacji:

MNIEJ Wejście

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

Wyjście CSS

div > span {
  width: calc((100% - 10px) - 80px);
}

Źródło: http://lesscss.org/functions/#string-functions-escape .

natchiketa
źródło
2
Kołyszesz koleś! Dziękuję za te przykłady i wyjaśnienia. Czy wiesz, jak mogę podzielić nieznaną szerokość pojemnika (nazwijmy to kategoriami div) na 4 równe części, używając LESS?
Shawn Spencer
5
@ShawnSpencer: Pomiędzy wierszami jest dużo niejasności. Czy potrafisz stworzyć JSFiddle ilustrujące to, co próbujesz rozwiązać? Mogę spróbować odgadnąć przypadek użycia, ale przeszkadza mi to, że nie znam wszystkich szczegółów, i jestem pewien, że wiesz, jak to działa - twoje najgorsze zahamowania w końcu prowadzą cię do psychiki.
natchiketa
2
Nie mam ochoty rezygnować z dojrzałości. Ponieważ wybieram proste rozwiązanie CSS i ponieważ udało mi się wszystko działać, używając jednej z odpowiedzi, na razie jestem dobry. Dziękuję jednak za propozycję obejrzenia przykładu JSFiddle. Bardzo cenione.
Shawn Spencer
0

Myślę, że width: -moz-calc(25% - 1em);właśnie tego szukasz. Możesz też poszukać tego łącza w celu uzyskania dalszej pomocy

Akshay Khandelwal
źródło
-3

Lub możesz użyć atrybutu margin w następujący sposób:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }
THeBAckwardss
źródło
3
OP chce, aby szerokość 10 pikseli była mniejsza niż 100% szerokości. Twój CSS tego nie robi. Dzięki temu będzie szerszy niż 100%.
Andrew Barber
-3

Spróbuj tego :

width:auto;
margin-right:50px;
user1552559
źródło