Jon Stuebe

oocss, sass, and the placeholder

css oocss sass

oocss, sass, and the placeholder

Posted by Jon Stuebe on .
Featured

css oocss sass

oocss, sass, and the placeholder

Posted by Jon Stuebe on .

Just stumbled upon this gem of an article that shows how to use placeholders to keep your CSS dry and still write from an oocss angle. Normally, when I've used @extend in the past with sass I've always looked down on it because it outputs the css in the markup where as @mixin does not. However, you usually get a lot of duplicate code with @mixin. By using a placeholder it essentially acts like @extend but only outputs the code if it is extended.

%extrap {
    padding-left: 5px;
}

.first-column {
  @extend %extrap;
}

ul li:first {
  @extend %extrap;
}

This would compile to

.first-column, ul:first {
    padding-left: 5px;
}

Original Article

user

Jon Stuebe