https://github.com/timrogers/sass-box-sizing-mixin

A mixin for the Sass CSS meta-language allowing you to effectively use the little-known box-sizing property effectively
https://github.com/timrogers/sass-box-sizing-mixin

Last synced: 28 days ago
JSON representation

A mixin for the Sass CSS meta-language allowing you to effectively use the little-known box-sizing property effectively

• Host: GitHub
• URL: https://github.com/timrogers/sass-box-sizing-mixin
• Owner: timrogers
• Created: 2010-09-25T08:02:46.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2010-09-25T08:04:42.000Z (over 14 years ago)
• Last Synced: 2024-11-24T13:43:52.433Z (2 months ago)
• Homepage:
• Size: 93.8 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Box Sizing Mixin / box-sizing.scss

===================================

By default, the web browsers we use on a daily basis use the __W3C box model__. Under this model, the width of a box does not include the padding and the border - instead, this is added on top of this value to the outside of the box's content.

However, modern browsers, and the CSS specification offer some useful CSS properties that allow you to change how this works. There are two other possible values which you can use to different effect:

- padding-box (not supported by CSS3 specification, but implemented in Firefox and WebKit)

`@import box-sizing; sass-box-sizing(padding);`

With this option, the width of the box includes the padding of the box, but the border is still tacked into the outside independently.

- border-box

`@import box-sizing; sass-box-sizing(border);`

With this option, the width of the box includes both the border and the padding, so the width you specify will actually be the width of everything related to the box, except the margins of course.

- content-box

`@import box-sizing; sass-box-sizing(content);`

This is the default W3C option, that is used in browsers if no other property is specified.

About

------

This is a mixin for the Sass CSS meta-language, created by [Tim Rogers](http://www.tim-rogers.co.uk). This work is completely in the public domain. Use it as you see fit!