Skip to content

re: Cool things you can do with Sass - Part 1 VIEW POST


My favorite thing to do in SCSS is to generate utility classes with an each loop:

$colors: (
  'transparent': transparent,
  'black': #292929,
  'white': #ffffff,
  'text': #292929,
  'red': #ff545a,
  'blue': #2b3947

@each $color, $classColor in $colors {
  .text-#{$color} {
    color: #{$classColor};

  .bg-#{$color} {
    background-color: #{$classColor};

Also, if you add "scss" after your initial three tilda marks for your code snippets you'll get syntax highlighting for this article.


Absolutely, creating utility classes is one the handiest things we can do in SCSS.
I'll be covering loops, functions in my next blog post.

Thanks a ton for the syntax highlighting thing, I am kinda new here. :)


No problem! The syntax highlighting thing I mentioned generally travels for a bunch of websites using markdown as long as the developer included the correct package for the stylings.

Great article! Looking forward to your follow up!

code of conduct - report abuse