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
avatar
background-color: #444
+make-md-column(1)
and change my html to just
<div class="avatar">
Neat!