Box Sizing with SASS

Stop doing all that math yourself

Box sizing is a very convient CSS feature. By using border-box, you can tell an element to not let margin or padding affect it's explicitly set dimensions.

Let's say you have an element that you want to be 100px wide by 100px tall, and have 10px of padding. You are probably used to having to subtract the padding manually by setting the height and widht to 80px, knowing the padding will cause it to grow.

With Border Box, the element will be the size you set regardless of padding.

@mixin box-sizing( $type: border-box ) {
	-webkit-box-sizing: $type;
	   -moz-box-sizing: $type;
	     -o-box-sizing: $type;
	    -ms-box-sizing: $type;
	        box-sizing: $type;

box-sizing.scss can be downloaded here or copied above

PS: If Border Box really turns you on, here's how to marry it.

* { @include box-sizing(); } /* make global */

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Comment:

** Border Box may decrease your mathematics skills **