Generated by SassMeister.com.

input.scss

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


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

// - 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;
    border-color: $border-dark;
}

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

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

/***********
 * Nesting *
***********/
.navigation {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }    
    li {
        display: inline-block;
        
        a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            
            &:hover {
                text-decoration: underline;
            }
        }
        // vagy
        a:hover {
            text-decoration: underline;
        }
    }
}

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

  // 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;
  }
}

.alert [dir=rtl] {}
[dir=rtl] .alert {}

/**********
 * Mixins *
**********/
// https://sass-lang.com/documentation/at-rules/mixin
@mixin flexCenter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

div {
    @include flexCenter
}

.masikElem {
    @include flexCenter;
    background-color: blue;
}

@mixin theme($theme: blue, $asd: 'asd') { // 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;
    text-decoration: underline;
  }
}

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

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

// 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;
  border-color: rgba(186, 218, 85, 0.8);
}

.content {
  background-color: #bada55;
}

.icon-display {
  content: "";
}

.foo-7 {
  content: "";
}

.majdnem-mindehol {
  display: "block";
}

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

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

/**********
 * Mixins *
**********/
div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.masikElem {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: blue;
}

.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;
  text-decoration: underline;
}

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

settings.json

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