orenyk

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!

munyari

@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);
}

jpbamberg1993

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

christoomey

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