DRY Code: Sass Bourbon why use some mixes?
Not sure if this question belongs on this board or not, but I was curious about the benefits, if any, of using some mixins in Bourbon. The whole point of Sass is to write DRY code, so why:
.div{
@import margin(10 10 10 10);
}
when you can just use regular css like
.div{
margin: 10px;
}
+3
source to share
1 answer
The Bourbon margin mixin takes four dimensions and maps them to the corresponding unidirectional property. I've never been a fan of unidirectional field properties, but according to CSSWizardry, they have the following benefits:
The advantages as I see them:
- It is easier to define the vertical rhythm in one fell swoop.
- More confidence in (re) moving components if you know their fields are all pushing in the same direction.
- Components and elements do not have to live in a specific order if their margins are independent of adjacent sides.
- Not caring about rolling borders means least of all worrying.
The example you provided will actually compile the following CSS:
SCSS
.div {
@import margin(10px 10px 10px 10px);
}
CSS
.div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
See the Bourbon Docs for more information on offsetting directional properties.
0
source to share