Skip to content

Instantly share code, notes, and snippets.

@payamomrani
Forked from glueckpress/_process.scss
Created March 3, 2020 05:44
Show Gist options
  • Save payamomrani/fa6d5bfe4e0f15e7429860096e3a5886 to your computer and use it in GitHub Desktop.
Save payamomrani/fa6d5bfe4e0f15e7429860096e3a5886 to your computer and use it in GitHub Desktop.
Dynamically create classes with SASS (from http://www.paulund.co.uk/dynamically-create-css-classes-sass)
$colours:
"red" #FF0000,
"blue" #001EFF,
"green" #00FF00,
"yellow" #F6FF00;
@each $i in $colours{
.#{nth($i, 1)}-background {
background: nth($i, 2);
}
.#{nth($i, 1)}-color {
color:nth($i, 2);
}
}
.red-background {
background: #FF0000;
}
.red-color {
color: #FF0000;
}
.blue-background {
background: #001EFF;
}
.blue-color {
color: #001EFF;
}
.green-background {
background: #00FF00;
}
.green-color {
color: #00FF00;
}
.yellow-background {
background: #F6FF00;
}
.yellow-color {
color: #F6FF00;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment