Sass

Syntactically Awesome StyleSheets

/* This is Sass */
@mixin theme-colors($theme) {
  @if $theme == 'light' {
    background-color: $light-bg;
  } @else {
    background-color: $dark-bg;
  }
}

Sass is actually 2 compiled stylesheet languages that extend regular old CSS (Cascading StyleSheets) 🗒️. “Sass” refers to the compiler, sass that converts either a .sass or .scss file into a regular old .css CSS file.

.sass

• regular CSS without ;s and {}s for nicer / easier syntax:

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li 
    display: inline-block

  a 
    display: block
    padding: 6px 12px
    text-decoration: none

.scss

• regular CSS with bonus features:
  • variables:

  $red: hsl(0, 100%, 50%);
  
  .button.danger {
    color: $red;
    border: 1px solid $red;
  }

  • nesting:

  .button {
    a {
      font-weight: bold;
    }
  
    .success {
      color: green;
    }
  }

  • mixins:

  @mixin flex-column {
    display: flex;
    flex-direction: column;
    background: gray;
  }
  .card {
    @include flex-column;
  }
  .aside {
    @include flex-column;
  }

  • functions:

  @mixin theme-colors($theme) {
    @if $theme == 'light' {
      background-color: $light-bg;
    } @else {
      background-color: $dark-bg;
    }
  }

More External Links

• Official Site 🌐
• Official Docs 🌐
• Official Guide 🌐