Generated by SassMeister.com.

input.scss

//Modules
@use "sass:map";
@use "sass:list";
//variables
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//nesting
#content{
    font-size: 12px;
    &, a{
        color: #333;
    }
}

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 0.5s;
  }

  &:hover { font-size: 36px; }
}

//Hidden properties
$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

//Default
$page-color: #333;
$page-color: #666 !default;
$section-color: #999 !default;
body {
    color: $page-color;
}
.section {
    color: $section-color;
}

//Mixing
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

//extends
.serious-error{
    @extend .alert;
    font-weight: bold;
}

//Mathematics
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
//Interpolation
$class-name: wrapper;
$attribute-name: font;
div.#{$class-name}{
    #{$attribute-name}-size: 12px;
}

//Control Directives
$type: small;
p {
    @if $type == large {
        font-size: 24px;
    } @else if $type == medium{
        font-size: 18px;
    } @else {
        font-size: 16px;
    }
}

//Looping
//@for
@for $i from 1 through 3 {
    .for-#{$i} {
    width: 10px * $i;
    }
}
//@each
@each $item in item1, item2{
    .#{$item}{
        width: 500px;
    }
}
//@while
$i: 6;
@while $i > 0 {
    .while-#{$i} {
        width: 10px * $i;
    }
    $i: $i - 2;
}

//Maps
$theme-colors: (
  "primary": #28a745,
  "information": #17a2b8,
  "warning": #ffc107,
);

.color-pallet {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

@each $key, $value in $theme-colors {
    .#{$key} {
        background-color: $value;
    }
}

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

.font-medium {
    font-weight: map.get($font-weights, "medium");
}// 500

//Immutable set
$font-weights: map.set($font-weights, "extra-bold", 900);
    
.font-bold {
    font-weight: map.get($font-weights, "extra-bold");
}// 900

//merge
$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

$light-weights: map.merge($light-weights, $heavy-weights);
.font-medium {
    font-weight: map.get($light-weights, "medium");
}

//deep merge
$helvetica-light: (
  "weights": (
    "lightest": 100,
    "light": 300
  )
);
$helvetica-heavy: (
  "weights": (
    "medium": 500,
    "bold": 700
  )
);

$helvetica-light: map.deep-merge($helvetica-light, $helvetica-heavy);


@each $key, $value in map.get($helvetica-light, "weights"){
  .h-#{$key} {
    font-weight: $value;
  }
}
//deep-remove
$fonts: ("regular": 400, "medium": 500, "bold": 700);

@debug map.deep-remove($fonts, "regular");
// ("medium": 500, "bold": 700)
//map to list
@debug map.values($helvetica-light);
//functions
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

//@error
// @mixin reflexive-position($property, $value) {
//   @if $property != left and $property != right {
//     @error "Property #{$property} must be either left or right.";
//   }

//   $left-value: if($property == right, initial, $value);
//   $right-value: if($property == right, $value, initial);

// }

// .top {
//   @include reflexive-position(top, 12px);
//   //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//   // Error: Property top must be either left or right.
// }

//List
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
@debug list.append(10px 20px, 30px); // 10px 20px 30px
@debug list.append((blue, red), green); // blue, red, green
@debug list.append(10px 20px, 30px 40px); // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma); // 10px, 20px
@debug list.append((blue, red), green, $separator: space); // blue red green

markup.html

<body>
    <div class="info">This is info</div>
    <div class="alert">This is alert</div>
    <div class="success">This is success</div>
    <div class="serious-error">This is success</div>
    
    <div class="container">
        <article role="main">
            This is main article
        </article>
        <aside role="complimentary">
            This is complimentary
        </aside>
        
    </div>
    <div id="content">
        <div class="enlarge">
            Zoom this 
        </div>
        <button class="button">
            Rounded Button
        </button>
    </div>
</body>

output.css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

#content {
  font-size: 12px;
}
#content, #content a {
  color: #333;
}

.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 0.5s;
}
.enlarge:hover {
  font-size: 36px;
}

.button {
  border: 1px solid black;
}

body {
  color: #333;
}

.section {
  color: #999;
}

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert, .serious-error {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

.serious-error {
  font-weight: bold;
}

.container {
  width: 100%;
}

article[role=main] {
  float: left;
  width: 62.5%;
}

aside[role=complementary] {
  float: right;
  width: 31.25%;
}

div.wrapper {
  font-size: 12px;
}

p {
  font-size: 16px;
}

.for-1 {
  width: 10px;
}

.for-2 {
  width: 20px;
}

.for-3 {
  width: 30px;
}

.item1 {
  width: 500px;
}

.item2 {
  width: 500px;
}

.while-6 {
  width: 60px;
}

.while-4 {
  width: 40px;
}

.while-2 {
  width: 20px;
}

.color-pallet {
  background-color: #ffc107;
}

.primary {
  background-color: #28a745;
}

.information {
  background-color: #17a2b8;
}

.warning {
  background-color: #ffc107;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 900;
}

.font-medium {
  font-weight: 500;
}

.h-medium {
  font-weight: 500;
}

.h-bold {
  font-weight: 700;
}

.h-lightest {
  font-weight: 100;
}

.h-light {
  font-weight: 300;
}

.sidebar {
  float: left;
  margin-left: 64px;
}

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

settings.json

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