SASS Lists Code Example

Last Updated On Thursday 15th Jul 2021
  • Lists are in fact a fundamental part of the SCSS language
  • Lists contain a sequence of other values.
	$frameworks : 'svelte' '#ff3e00', 'react' '#61dafb', 'vue' '#42b983';

@each $clr in $frameworks {
    .color-#{nth($clr, 1)} {
        color: #{nth($clr, 2)};
    }
}
	

Here’s the Compiled CSS

	.color-svelte {
  color: #ff3e00;
}

.color-react {
  color: #61dafb;
}

.color-vue {
  color: #42b983;
}