JSFiddle - React, Tailwind, and code Playground
by Alexandru Gatea
SCSS
$roads: (
motorway, trunk, primary, secondary, tertiary, street
);
@each $road in $roads {
/*
@text-color-#{$road}-day: #000000;
@text-color-#{$road}-night: #ffffff;
@text-color-road-#{$road}: stepped(time-of-day, [0: @text-color-#{$road}-day, 1: @text-color-#{$road}-night]);
@text-outline-color-#{$road}-day: #ffffff;
@text-outline-color-#{$road}-night: #000000;
@text-outline-color-road-#{$road}: stepped(time-of-day, [0: @text-outline-color-#{$road}-day, 1: @text-outline-color-#{$road}-night]);
*/
}