Generated by SassMeister.com.

sass-variables-input.scss

/* --- Variables --- */
// $base-color: #c6538c;
// $border-dark: rgba($base-color, 0.88);

// .alert {
//   border: 1px solid $border-dark;
// }
/* Sass variables are not CSS variables */
// $variable: value 1;
// .rule-1 {
//   value: $variable;
// }

// $variable: value 2;
// .rule-2 {
//   value: $variable;
// }
/* Default values */
// $black: #000 !default;
// $black: #fff !default;

// .code {
//   background: $black;
// }
/* Scope */
// $global-variable: global valu;

// .content {
//   $local-variable: local value;
//   global: $global-variable;
//   local: $local-variable;
// }

// .sidebar {
//   global: $global-variable;
// //   local: $local-variable;
// }
/* Shadowing */
// $variable: global value;

// .content {
//   $variable: local value;
//   value: $variable;
// }

// .sidebar {
//   value: $variable;
// }

sass-variables-output.css

/* --- Variables --- */
/* Sass variables are not CSS variables */
/* Default values */
/* Scope */
/* Shadowing */

settings.json

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