Ads by ProfitSence
Close

SASS Lists Code Example

Last Updated on Wednesday 5th Oct 2022
  • 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;
}