$version: '2.3.1';

/* Compiled on version: #{$version} */
.app { color: $primary-color; }

# Compile once
sass input.scss output.css

# Watch for changes
sass --watch input.scss:output.css

# Watch an entire directory
sass --watch styles:dist

# Compressed production output
sass --style=compressed input.scss output.min.css

# Generate source maps (on by default)
sass --source-map input.scss output.css

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ]
}

$primary-color: #3498db;
$spacing-unit: 8px;
$font-stack: 'Helvetica Neue', Arial, sans-serif;
$is-rounded: true;

.button {
  background-color: $primary-color;
  padding: $spacing-unit * 2;
  font-family: $font-stack;
}

$border-radius: 4px !default;
$enable-shadows: true !default;

// A consumer can override before loading the module:
// $border-radius: 8px;
// @use 'config';

$counter: 0;

@mixin increment {
  $counter: $counter + 1 !global;
}

.a { @include increment; }
.b { @include increment; }
// $counter is now 2 globally

.nav {
  display: flex;

  &__item {
    margin-right: 1rem;

    &:hover {
      color: $primary-color;
    }

    &--active {
      font-weight: bold;
    }
  }
}

.btn {
  &.is-disabled { opacity: 0.5; }
  &::before { content: ''; }
  .dark-theme & { background: black; }
  & + & { margin-left: 8px; }
}

.text {
  font: {
    family: $font-stack;
    size: 16px;
    weight: bold;
  }
}

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 750px;
  }
}

@use 'utils/variables' as vars;
@use 'utils/mixins';

.card {
  color: vars.$primary-color;
  @include mixins.rounded-corners;
}

// Default namespace is the file name: 'variables'
@use 'utils/variables';

// Custom namespace
@use 'utils/variables' as vars;

// No namespace — access members directly (use sparingly)
@use 'utils/variables' as *;

// _library.scss
$primary: blue !default;
$radius: 4px !default;

// consumer.scss
@use 'library' with (
  $primary: teal,
  $radius: 8px
);

@forward 'variables';
@forward 'mixins';
@forward 'functions' show rem, strip-unit;

$-internal-cache: (); // private
$public-value: 10px;  // public

npm install -g sass-migrator

# Migrate a single entry-point file and everything it imports
sass-migrator module --migrate-deps main.scss

# Preview changes without writing to disk
sass-migrator module --dry-run --migrate-deps main.scss

sass-migrator module --migrate-deps --forward=all index.scss

@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

.hero {
  @include flex-center(column);
}

@mixin button($bg: blue, $color: white, $radius: 4px) {
  background: $bg;
  color: $color;
  border-radius: $radius;
}

.btn-danger {
  @include button($bg: red, $radius: 8px);
}

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}

.card {
  @include box-shadow(0 1px 2px rgba(black, 0.1), 0 4px 8px rgba(black, 0.1));
}

@mixin respond($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.container {
  width: 100%;

  @include respond(768px) {
    width: 750px;
  }
}

@mixin each-breakpoint($breakpoints) {
  @each $name, $width in $breakpoints {
    @media (min-width: $width) {
      @content($name);
    }
  }
}

@include each-breakpoint(('sm': 576px, 'md': 768px)) using ($name) {
  .visible-#{$name} { display: block; }
}

@use 'sass:math';

@function rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}

.title {
  font-size: rem(24px);
}

@function sum-list($list) {
  $total: 0;
  @each $item in $list {
    $total: $total + $item;
  }
  @return $total;
}

$widths: 10px, 20px, 30px;
$total-width: sum-list($widths); // 60px

%btn-base {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
}

.btn-primary {
  @extend %btn-base;
  background: $primary-color;
}

.btn-secondary {
  @extend %btn-base;
  background: gray;
}

.message {
  @extend .alert !optional;
}

@use 'sass:color';

@mixin text-color($bg) {
  @if color.lightness($bg) > 70% {
    color: black;
  } @else if color.lightness($bg) > 40% {
    color: darkgray;
  } @else {
    color: white;
  }
}

$icons: 'home', 'search', 'settings';

@each $icon in $icons {
  .icon-#{$icon} {
    background-image: url('icons/#{$icon}.svg');
  }
}

// Destructuring a map
$theme-colors: ('primary': blue, 'danger': red);
@each $name, $color in $theme-colors {
  .text-#{$name} { color: $color; }
}

@use 'sass:math';

@for $i from 1 through 5 {
  .col-#{$i} {
    width: math.div(100%, 5) * $i;
  }
}

$i: 1;
@while $i <= 3 {
  .mt-#{$i} { margin-top: $i * 4px; }
  $i: $i + 1;
}

@mixin spacing($size) {
  @if not (unitless($size) == false) {
    @error "Expected a value with units, got #{$size}.";
  }
  @warn "spacing mixin is deprecated, use gap() instead.";
  @debug "computed size: #{$size}";
  margin: $size;
}

@use 'sass:math';

.box {
  width: 100px + 50px;      // addition
  height: math.div(200px, 4); // division
  margin: -$spacing-unit;     // negation
  z-index: 2 * 5;             // multiplication

  @if (10px > 5px) and (true == true) {
    border: 1px solid black;
  }
}

$side: 'top';
.mt-#{$side} { margin-#{$side}: 1rem; }

@use 'sass:string';
$upper: string.to-upper-case('hello'); // 'HELLO'

@use 'sass:list';

$fonts: Helvetica, Arial, sans-serif;
$sizes: 4px 8px 16px;

.text { font-family: list.nth($fonts, 1); }

$appended: list.append($sizes, 32px); // 4px 8px 16px 32px
$joined: list.join(1px 2px, 3px 4px); // 1px 2px 3px 4px
$length: list.length($fonts); // 3

@use 'sass:map';

$theme-colors: (
  'primary': #3498db,
  'success': #2ecc71,
  'danger': #e74c3c
);

.alert {
  background: map.get($theme-colors, 'danger');
}

$merged: map.merge($theme-colors, ('warning': orange));
$keys: map.keys($theme-colors); // 'primary', 'success', 'danger'
$has: map.has-key($theme-colors, 'primary'); // true

@use 'sass:math';

math.div(10, 2);      // 5
math.round(4.6);      // 5
math.ceil(4.1);       // 5
math.floor(4.9);      // 4
math.abs(-8px);        // 8px
math.min(1px, 4px, 2px); // 1px
math.max(1px, 4px, 2px); // 4px
math.clamp(0, 15, 10); // 10 (clamps value between min and max)
math.percentage(math.div(1, 4)); // 25%

@use 'sass:color';

color.adjust($primary-color, $lightness: -10%);
color.scale($primary-color, $lightness: 20%);
color.mix(blue, red, 50%);
color.lightness($primary-color);
color.complement($primary-color);

@use 'sass:meta';

meta.type-of(10px);        // 'number'
meta.type-of('hi');        // 'string'
meta.function-exists('rem'); // true / false
meta.mixin-exists('flex-center');

$fn: meta.get-function('rem');
meta.call($fn, 24px);

.parent {
  color: red;

  @at-root .unnested {
    color: blue;
  }

  @at-root {
    .sibling-one { color: green; }
    .sibling-two { color: purple; }
  }
}

@media (min-width: 768px) {
  .sidebar {
    @media (orientation: landscape) {
      width: 300px;
    }
  }
}
// Compiles to:
// @media (min-width: 768px) and (orientation: landscape) { .sidebar { width: 300px; } }

@forward 'abstracts/variables';
@forward 'abstracts/mixins';

@use 'base/reset';
@use 'base/typography';
@use 'components/buttons';
@use 'components/cards';
@use 'layout/header';
@use 'layout/footer';
@use 'pages/home';

@use 'sass:test';
@use 'true' as *;
@use '../abstracts/functions' as *;

@include describe('rem()') {
  @include it('converts px to rem') {
    @include assert-equal(rem(32px), 2rem);
  }
}