Обчислення ширини від відсотка до пікселя, то мінус на піксель у МЕНШІЙ CSS

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

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

Я використовую CSS3, calc()щоб він не працював:calc(100% - 10px)

Приклад: якщо 100% = 500px, так ширина = 490px (500-10);

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

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

Чи можу я це зробити менше ? Я знаю , як це зробити в JQuery і простому CSS , як маржинальна просочення або інакше ... але я буду намагатися робити функціонал в LESS зcalc()

Ви можете уникнути calcаргументів, щоб не допустити їх оцінки при компіляції.

Використовуючи свій приклад, ви просто оточите аргументи, як-от так:

calc(~'100% - 10px')

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

Я вважаю, що я використовую це одним із наступних трьох способів:

Основні втечі

Все, що знаходиться всередині calcаргументів, визначається як рядок і є повністю статичним, поки його не оцінить клієнт:

МЕНШЕ Введення

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

Вихід CSS

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

Інтерполяція змінних

Ви можете вставити меншу змінну в рядок:

МЕНШЕ Введення

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);це те, що ви шукаєте. І ви, можливо, захочете надати цьому посиланню будь-яку подальшу допомогу

Або ви можете використовувати такий атрибут margin, як цей:

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

Спробуйте це :

width:auto;
margin-right:50px;