DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Enes Kฤฑlฤฑรง
Enes Kฤฑlฤฑรง

Posted on • Updated on

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.
Enter fullscreen mode Exit fullscreen mode

You can expand it according to your needs.

If you want to see the expanded version, look at this Repository

Top comments (0)

๐Ÿ‘€ Just want to lurk?

ย 
That's fine, you can still create an account and turn on features like ๐ŸŒš dark mode.