.accordion {
  max-width: 600px;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;

    &--open {
      display: block;
    }
  }
}

.accordion {
  max-width: 600px;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
}
.accordion__copy--open {
  display: block;
}

live-sass-compiler

compressed

expanded

.css

expanded

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css/"
    }
]

compressed

"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/dist/css/"
    }
]

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

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

.btn-a {
    display: inline-block;
    padding: 10px;
}
.btn-b {
    @extend .btn-a;
    background-color: black;
}

.btn-a, .btn-b {
    display: inline-block;
    padding: 10px;
}
.btn-b {
    background-color: black;
}

$spaceamounts: (1, 2, 3, 4, 5);

@each $space in $spaceamounts {
    .m-#{$space} {
        margin: #{$space}rem;
    }
}

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

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

// set text color based on bg
@function set-text-color($color) {
    @if (lightness($color) > 70) {
        @return #333;
    } @else {
        @return #fff;
    }
}

// set bg color & text color
@mixin set-background($color) {
    background-color: $color;
    color: set-text-color($color);
}

h1 {
    @include set-background($primary-color);
}

@function set-text-color($color) {
    @if (lightness($color) > 70) {
        @return #333;
    } @else {
        @return #fff;
    }
}

h1 {
    background-color: $primary-color;
    color: set-text-color($primary-color);
}

$primary-color: blue;
$secondary-color: lightblue;

@import 'config';