Anthony Lee

Sass Control Directives

Introduction

user

Anthony Lee

I love to code and better the world. Graduate student at Georgia Tech specializing in Machine Learning.


Featured

sass

Sass Control Directives

Posted by Anthony Lee on .

I did not know until today that Sass had a control expressions. Very cool.

Notes from Upcase:

Control directives and expressions are useful in a scenario where the same styles are needed several times with variations. The functions available are: @if, @for, @each and @while. Using Sass maps with the @each function is a powerful combination.

$flashes: (
  "error": #fbe3e4,
  "notice": #e5edf8,
  "success": #e6efc2,
);

@each $type, $color in $flashes {
  .flash-#{$type} {
    background: $color;
    color: darken($color, 10%);
    padding: 10px 20px;
    width: 100%;
  }
}
user

Anthony Lee

http://anthonylee.io

I love to code and better the world. Graduate student at Georgia Tech specializing in Machine Learning.