Awesome SASS: Mixins

Why I love sass

I’ll be the first to admit, that despite considering myself a fullstack developer, my CSS knowledge is pretty limited. I know enough to say, assign a div a background color, and give it appropriate styling, but I shy away from the idea of writting CSS skeleton code from scratch and thus always rely on something like Bootstrap or Foundation for my projects.

Up until recently, every project I had worked on with bootstrap used the compiled bootstrap CSS. I was aware that Bootstrap provides their SASS files but I never saw a point to using them (especially with the extra overhead of adding a SASS compiling step) until my coworker showed me this neat trick.

Usually, if I had a div I wanted to style while keeping within the bootstrap grid I’d do something like

<div class="col-md-1 avatar">

then in my css I’d have styles specific to my avatars, allowing the browser to apply bootstraps rules for column sizing.

However, if I write my avatar styling in SASS I can take advantage of the bootstrap SASS and mixin the bootstrap stylings into my avatar such as

  background-color: #444

and change my html to just

<div class="avatar">