CSS Preprocessor: SASS / SCSS

Include SASS

<style lang="scss">
  /* ... */
</style>

SASS Variables

$dark-blue: #212C4F;
$light-gray: #F0F3F5;

@import "@/global-styles/colours.scss"
body {
  background: $dark-blue;
}

SASS Mixin

@mixin heading-1 {
  font-size: 80px;
  line-height: 86px;
  font-weight: bold;
}

h1 {
  @include heading-1;
}

Mixin with argument(s)

@mixin text($colour: $white) {
  @extend %large;
  font-weight: bold;
  color: $colour;
}

p {
  @include text($purple);
}

SASS Placeholder

%large {
  line-height: 37px;
  font-size: 24px;
}

@mixin large-text {
  @extend %large;
}
@mixin large-text-bold {
  @extend %large;
  font-weight: bold;
}

Nested Styles

nav {
  color: $white;

  a {
    color: $gray;
  }
}

input {
  color: $white;

  &::placeholder {
    color: $gray;
  }
}