Generated by SassMeister.com.

input.scss

// https://sass-lang.com/
// Preprocessing


/*************
 * Variables *
*************/
$base-color: #c6538c; // nincs kulonbseg a - es _ kozott $base_color == $base-color
$border-dark: rgba($base_color, 0.88);

// - Scope

$global-variable: "";

.content {
  $local-variable: "";
}

.sidebar {
  content: $global-variable; // $local-variable nem erheto el
}

// -- Shadowing
.content-shadow {
    $base-color: blue;
    background-color: $base-color;
}

.content {
    background-color: $base-color;
}

// -- Interpolation
// https://sass-lang.com/documentation/interpolation
$name: "foo";
.icon-#{$name} { content: ""; }
.foo-#{5+2} { content: ""; }

/***********
 * Nesting *
***********/
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        
        li {
            display: inline-block;
            
            a {
                display: block;
                padding: 6px 12px;
                text-decoration: none;
            }
        }
    }
}

/* Parent Selector */
.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}

/**********
 * Mixins *
**********/
// https://sass-lang.com/documentation/at-rules/mixin
@mixin flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
@mixin theme($theme: blue) { // optional argument
    background: $theme;
    box-shadow: 0 0 1px rgba($theme, .25);
    color: #fff;
}

.info {
    // @include flex;
    @include theme;
}
.alert {
    @include theme($theme: red);
}
.success {
    @include theme($theme: green);
}

// - Content blocks
@mixin hover {
    &:not([disabled]):active
    &:not([disabled]):focus,
    &:not([disabled]):hover {
        @content;
    }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

// - Interpolation example
@mixin rtl($property, $ltr-value, $rtl-value) {
    #{$property}: $ltr-value;

    [dir=rtl] & {
        #{$property}: $rtl-value;
    }
}
.sidebar {
    @include rtl(float, left, right);
}

// Extend/Inheritance

// Operators

// Partials

// Modules
// https://sass-lang.com/documentation/variables#default-values
// https://sass-lang.com/documentation/variables#built-in-variables

output.css

/*************
 * Variables *
*************/
.sidebar {
  content: "";
}

.content-shadow {
  background-color: blue;
}

.content {
  background-color: #c6538c;
}

.icon-foo {
  content: "";
}

.foo-7 {
  content: "";
}

/***********
 * Nesting *
***********/
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* Parent Selector */
.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

/**********
 * Mixins *
**********/
.info {
  background: blue;
  box-shadow: 0 0 1px rgba(0, 0, 255, 0.25);
  color: #fff;
}

.alert {
  background: red;
  box-shadow: 0 0 1px rgba(255, 0, 0, 0.25);
  color: #fff;
}

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

.button {
  border: 1px solid black;
}
.button:not([disabled]):active .button:not([disabled]):focus, .button:not([disabled]):hover {
  border-width: 2px;
}

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

settings.json

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