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

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

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 .

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

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;
    }

Spróbuj tego :

width:auto;
margin-right:50px;