SASS: width: 100% - 20px - is it possible?

Question

I use padding in many of my projects, and it would be handy if I could substract the padding from the width, it is possible ?

if:

width:100%; 

and

padding: 20px; 

=

100% - 40px ?  

Answer 1

You can use box-sizing: border-box to make the padding be counted as part of the width.

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

Here's a quick demonstration: http://jsfiddle.net/thirtydot/DNs2u/

More info:

• 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);

more calc() uses: CSS Tricks: A Couple of Use Cases for Calc()