SASS: ширина: 100% - 20 пикселей - это возможно?

Question

Я использую отступ во многих моих проектах, и было бы удобно, если бы я мог вычесть отступ из ширины, возможно?

если:

width:100%; 

и

padding: 20px; 

=

100% - 40px ?  

Answer 1

Вы можете использовать box-sizing: border-box, чтобы padding считался частью width.

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Вот быстрая демонстрация: http://jsfiddle.net/thirtydot/DNs2u/

Дополнительная информация:

• http://caniuse.com/css3-boxsizing
• http://www.w3.org/TR/css3-ui/#box-sizing0
• https://developer.mozilla.org/en/CSS/box-sizing

Answer 2

width: calc(100% - 40px);

больше calc () использует: CSS-хитрости: пара примеров использования Calc ()

Answer 3

Это невозможно с sass

Это возможно с помощью JavaScript.

$('#element').width($(window).width() - 40)

Answer 4

Нет, к сожалению.Поскольку SASS компилируется на сервере в простой CSS, а CSS визуализируется клиентом, вы не можете получить этот эффект с помощью SASS.Другими словами, только когда браузер интерпретирует CSS, вы узнаете, что такое 100%, и это долго после того, как у SASS была возможность скомпилировать.на стороне сервера на уровне пикселей, перед визуализацией страницы, на самом деле единственный способ сделать это - иметь компоновку с фиксированной шириной.Многие сайты делают это - как, например, этот, - поэтому я бы посмотрел на это как на вариант.