SCSS samples

// Random code for illustration purposes

@charset "utf-8";

@import
  "default",
  "variables",
  "base",
  "menubar",
  "layout",
  "accessibility",
  "typography",
  "links",
  "social",
  "icons",
  "footer"
;

.class {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 900;

  @extend another-class;

  @extend %placeholder;

  @include mixin;

  .nested-element {
    &:not(.something):hover,
    &:active {
      border-bottom: thin solid $variable;
    }
  }
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

%clearfix {
  &::before {
    content: '';
    display: table;
  }

  &::after {
  @extend %clearfix::before;
    clear: both;
  }
}

@mixin transition {
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
}

@mixin notification($bg-colour, $border-colour) {
  background: transparentize($bg-colour, 0.9);
  border-left: thick solid $border-colour;
  margin: $vrythm 0;
}

@mixin tablet {
  @media screen and (min-width: #{$tablet}) {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: #{$desktop}) {
    @content;
  }
}

$something: #123456 !default;
$foo: $bar !default;

#id {
  font-color: $something !important;
}