SASS: width: 100% - 20 pixels - is this possible?

Question

I use padding in many of my projects, and it would be convenient if I could subtract the padding in width, is that possible?

if:

width:100%; 

and

 padding: 20px; 

=

 100% - 40px ? 

Answer 1

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

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

Here is a quick demo: http://jsfiddle.net/thirtydot/DNs2u/

Additional Information:

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

Answer 3

No Unfortunately. Since SASS is compiled on the server in direct CSS, and CSS is rendered by the client, you cannot get this effect with SASS. In other words, this is not until the browser interprets CSS, that you know what 100% is, and that long after SASS has been able to compile.

If you need to know the internal width of a block element on the server side of the pixel level before the page is displayed, the really only way to do this is to have a fixed-width layout. Many sites do this - for example, this, for example, so I would look at this as an option.

Answer 4

This is not possible with sass

These things are possible with javascript.

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