Create your mini CSS framework.

As developers, we want to write less and cleaner code. In this post i will show you a method that we can use in CSS for modular and cleaner code.

These codes are written with SCSS.

// Create variables
$red:                 #ff0000;
$blue:                #0000ff;
$green:               #008000;

// Create variables map
$colors: (
  "red":              $red,
  "blue":             $blue,
  "green":            $green
);

// And loop for all variables
@each $name, $value in $colors {
  .color-#{$name}      { color: $value };
  .background-#{$name} { background: $value };
}

// Output
.color-red       { color: red};
.color-blue      { color: blue};
.background-red  { background: red};
.background-blue { background: blue};
etc.