Variables

$main-color: hsl(234, 42%, 40%);

Split that shit up

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use  rule.

SCSS SYNTAX

@mixintheme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1pxrgba($theme, .25);
color: #fff;
}

.info {
@includetheme;
}
.alert {
@includetheme($theme: DarkRed);
}
.success {
@includetheme($theme: DarkGreen);
}

Nesting is good

Mixins

@mixintheme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1pxrgba($theme, .25);
color: #fff;
}

.info {
@includetheme;
}
.alert {
@includetheme($theme: DarkRed);
}
.success {
@includetheme($theme: DarkGreen);
}

Extend

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

We can do math operations as well!