Вычисление ширины от процента к пикселю, а затем минус по пикселю в LESS CSS

Я буду вычислять ширину в каком-то элементе от процента к пикселю, поэтому я буду минус -10px с помощью LESS и calc(). Это возможно?

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

Я использую CSS3 calc(), поэтому он не работает: calc(100% - 10px)

Пример:, если 100% = 500 пикселей, поэтому width = 490px (500-10);

Я сделал демо для тестирования: http://jsfiddle.net/4DujZ/55/

поэтому добавление будет указывать: 5 (10px/2) все время, когда я изменяю размер.

Могу ли я сделать это в LESS? Я знаю, как это сделать в jQuery и просто CSS, например, добавление полей или еще... но я постараюсь выполнить функцию МЕНЬШЕ с помощью calc()

Ответ 1

Вы можете избежать аргументов calc, чтобы предотвратить их оценку при компиляции.

Используя ваш пример, вы просто окружаете аргументы, например:

calc(~'100% - 10px')

Демо: http://jsfiddle.net/c5aq20b6/

Я нахожу, что использую это одним из следующих трех способов:

Основное экранирование

Все внутри аргументов calc определяется как строка и полностью статично, пока не будет оценено клиентом:

LESS Input

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

Выход CSS

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

Интерполяция переменных

Вы можете вставить в строку LESS переменную:

LESS Input

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

Выход CSS

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

Смешение экранированных и скомпилированных значений

Вы можете избежать процентного значения, но идите и оцените что-то в компиляции:

LESS Input

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

Выход CSS

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

Источник: http://lesscss.org/functions/#string-functions-escape.

Ответ 2

Я думаю, что width: -moz-calc(25% - 1em); - это то, что вы ищете. И вы можете передать эту ссылку для поиска дальнейшей помощи

Ответ 3

Или вы можете использовать атрибут margin следующим образом:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Ответ 4

Попробуйте следующее:

width:auto;
margin-right:50px;