Bourbon Introduction

Upcase
1
Bourbon is our core library that helps us build maintainable stylesheets. It’s built with Sass and provides the foundation for all of our styles as well as Neat, Bitters, and Refills. In this video we explain exactly what Bourbon provides, and how you can best use it to aid your styling work.
This is a companion discussion topic for the original entry at https://thoughtbot.com/upcase/videos/bourbon-introduction
2

I was wondering if you could comment on the use of commas to separate mixin parameters, and why they’re not used consistently. For example, the size mixin does use commes, e.g.:

@include size(50px, 100px);

but the margin mixin does not and only uses spaces to separate parameters, e.g.:

@include margin(20px null);

Finally, the position mixin actually combines both, with the type of position separated from the top, left, etc declarations with a comma, but the positioning declarations themselves are space separated, e.g.:

@include position(absolute, 0 1em null null);

I’m guessing this has something to do with the fact that margin and the positioning declarations take a variable number of inputs and proceed accordingly, but I was hoping you could expand on that and explain why you couldn’t just use comma-separated parameters instead. Thanks!

3

@christoomey there’s a typo in the shownotes.

.component {
  @include position(absolute, 0 1em null null);
}

should be

.component {
  @include position(relative, 0 null null 10em);
}
4

What is the point of the margin mixin? Since I can just set value the same way to margin ?

5

Bourbon’s margin mixin is just a convenience function that allows using null to skip specific margins while specifying the others. Note This is different than specifying 0 in a typical margin shorthand declaration:

margin: 0 10px 3em 20vh

// equivalent to the following
margin-top: 0;
margin-right: 10px;
margin-bottom: 3em;
margin-left: 20vh

@include margin(null 10px 3em 20vh)

// equivalent to the following
// note the lack of a specified margin-top
margin-right: 10px;
margin-bottom: 3em;
margin-left: 20vh