:root { --colour-blue: #2e51a1; --colour-blue-l: #5c7abf; --colour-blue-xl: #b2c3ec; --colour-blue-d: #133176; --colour-blue-xd: #031235; --colour-grey: #7f7f7f; --colour-grey-l: #b2b2b2; --colour-grey-xl: #d8d8d8; --colour-grey-xxl: #f0f0f0; --colour-white: #FFF; --colour-page: #FFF; --colour-light: #FFF; --colour-grey-d: #4c4c4c; --colour-grey-xd: #4c4c4c; --colour-black: #000; --colour-dark: #000; }
$colour: ( colour-blue: #2e51a1, colour-blue-l: #5c7abf, colour-blue-xl: #b2c3ec, colour-blue-d: #133176, colour-blue-xd: #031235, colour-grey: #7f7f7f, colour-grey-l: #b2b2b2, colour-grey-xl: #d8d8d8, colour-grey-xxl: #f0f0f0, colour-white: #FFF, colour-page: #FFF, colour-light: #FFF, colour-grey-d: #4c4c4c, colour-grey-xd: #4c4c4c, colour-black: #000, colour-dark: #000, ); :root { @each $name, $color in $colour { --#{$name}: #{$color}; } }