Generated by SassMeister.com.

input.scss

@use "sass:map";  // include { map } from 'sass/map';
@use "sass:list"; // include { list } from 'sass/list';
// Lists
// 16px 24px 32px 64px

$icons: 16, 24, 32, 64, 128, 512; // JS tomb [16px, 24px]

// array.foreach(size => ...) 
@each $size in $icons {
    .icon-#{$size} {
        display: block;
        width: #{$size}px;
        height: #{$size}px;
    }
}

.super-danger {
    color: list.nth($icons, 2); // icons[1]
}

// Maps

$alerts: (
//.  key.     value
    'danger': red,
    'warning': yellow,
    'success': green,
    'good-job': aqua
); // { key: value }

// @each $key, $value in $map {}
@each $level, $color in $alerts {
    .#{$level} {
        background-color: $color;
    }
}

.super-danger {
    color: map.get($alerts, "danger"); // alerts.danger v alerts['danger']
}

// Control flow

$icons: 16, 24, 32, 64, 128, 512; // JS tomb [16px, 24px]

@mixin iconMixin($icons, $isCircle: false) {
    // array.foreach(size => ...) 
    @each $size in $icons {
        .icon-#{$size} {
            display: block;
            width: #{$size}px;
            height: #{$size}px;
            
            @if $isCircle {
                border-radius: 50%;
            }
        }
    }
}

@include iconMixin((2,4,6));

@include iconMixin((20,40,60), true);

output.css

.icon-16 {
  display: block;
  width: 16px;
  height: 16px;
}

.icon-24 {
  display: block;
  width: 24px;
  height: 24px;
}

.icon-32 {
  display: block;
  width: 32px;
  height: 32px;
}

.icon-64 {
  display: block;
  width: 64px;
  height: 64px;
}

.icon-128 {
  display: block;
  width: 128px;
  height: 128px;
}

.icon-512 {
  display: block;
  width: 512px;
  height: 512px;
}

.super-danger {
  color: 24;
}

.danger {
  background-color: red;
}

.warning {
  background-color: yellow;
}

.success {
  background-color: green;
}

.good-job {
  background-color: aqua;
}

.super-danger {
  color: red;
}

.icon-2 {
  display: block;
  width: 2px;
  height: 2px;
}

.icon-4 {
  display: block;
  width: 4px;
  height: 4px;
}

.icon-6 {
  display: block;
  width: 6px;
  height: 6px;
}

.icon-20 {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.icon-40 {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.icon-60 {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}