Obliczanie szerokości od procent do piksela, a następnie minus przez piksel w mniej CSS

Obliczę szerokość w jakimś elemencie od procent do piksela, więc będę minus-10px używając LESSi calc(). To możliwe?

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

Używam CSS3 calc() więc nie działa: calc(100% - 10px)

Przykład: if 100% = 500px so width = 490px (500-10);

Zrobiłem demo do testów: http://jsfiddle.net/4DujZ/55/

Więc padding powie: 5 (10px / 2) cały czas, gdy zmieniam rozmiar.

Czy Mogę to zrobić w Mniej ? Wiem jak to zrobić w jQuery i prosty CSS jak margin padding lub inaczej... ale postaram się zrobić funkcjonalne w Mniej z calc()

Author: l2aelba, 2013-02-11
Source

4 answers

Możesz uciec od argumentów calc, aby zapobiec ich ocenie podczas kompilacji.

Używając Twojego przykładu, możesz po prostu otoczyć argumenty, jak to: 

calc(~'100% - 10px')

Demo: http://jsfiddle.net/c5aq20b6/

Uważam, że używam tego na jeden z następujących trzech sposobów:

Basic Escaping

Wszystko wewnątrz argumentów calc jest zdefiniowane jako łańcuch znaków i jest całkowicie statyczne, dopóki nie zostanie ocenione przez klient:

Mniej wejść 

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

Wyjście CSS 

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

Interpolacja zmiennych

Możesz wstawić zmienną LESS do łańcucha:

Mniej wejść 

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

Wyjście CSS 

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

Mieszanie unikalnych i skompilowanych wartości

Możesz chcieć uciec od wartości procentowej, ale śmiało Oceń coś na kompilacji:

Mniej wejść 

@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 .

 221
Author: natchiketa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-05 18:47:00

Myślę, że width: -moz-calc(25% - 1em); jest tym, czego szukasz. I może chcesz dać ten Link poszukaj dalszej pomocy

 0
Author: Akshay Khandelwal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-11 17:57:56

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;
    }
 -3
Author: THeBAckwardss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-11 14:59:56

Spróbuj tego: 

width:auto;
margin-right:50px;
 -3
Author: user1552559,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-22 16:51:35