Dynamically create classes with SASS (from http://www.paulund.co.uk/dynamically-create-css-classes-sass)

_process.scss

$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);
	}
}

output.css

.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;
}

Thanks!

Thanks!

Thanks !

Thanks....!

thanks :)

Does this still work with version 1.14.3 ? I can't seem to get it to work:

$colours:
  "blue" #22a1c4,
  "green" #02d425,
  "grey" #efefef,
  "lgrey" #02d425,
  "dgrey" #333333,
  "red" #d9534f;

@each $i in $colours{
	.text-#{nth($i, 1)} {
		color:nth($i, 2);
  }
  .bg-#{nth($i, 1)} {
		background: nth($i, 2);
	}
  .border-#{nth($i, 1)} {
		color:nth($i, 2);
	}
}

Merci !

Terimakasih :)

Arigato Sensei :-)

You no longer need to 'nth' when you use the @each

$colours:
"red" #FF0000,
"blue" #001EFF,
"green" #00FF00,
"yellow" #F6FF00;

@each $key, $value in $colours{
.#{$key}-background {
background: $value;
}
.#{$key}-color {
color: $value;
}
}