Расчет ширины от процента до пикселя, а затем минус на пиксель в LESS CSS

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

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

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

Пример: если 100% = 500 пикселей, значит ширина = 490 пикселей (500-10);

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

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

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

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

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

calc(~'100% - 10px')

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

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

Базовый побег

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

МЕНЬШЕ ввода

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

Вывод CSS

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

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

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

МЕНЬШЕ ввода

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

Вывод CSS

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

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

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

МЕНЬШЕ ввода

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

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

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

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

Попробуй это :

width:auto;
margin-right:50px;