SASS cheat sheet

A quick reference — intended for myself — to keep track of SASS syntax.

Command line

First navigate to the correct folder.

Watching single file:


sass --watch style.scss:style.css

Watching folder:


sass --watch scss:css

By default the output file will nest the elements, but they can also be expanded, compact or compressed.

Nested:


ul {
  display: inline-block; }
  ul li {
    list-style: none;
    color: rgb(51,51,51); }

Expanded:


ul {
  display: inline-block;
}
ul li {
  list-style: none;
  color: rgb(51,51,51);
}

(Unfortunately, there is no support for Allman-style brackets – my preferred style, even though it takes up more vertical space.)

Compact:


ul { display: inline-block; }
ul li { list-style: none; color: rgb(51,51,51); }

Compressed:


ul{display:inline-block;}ul li{list-style:none;color:rgb(51,51,51);}

Accompanying command line statements:


sass --watch --style expanded style.scss:style.css

sass --watch --style compact style.scss:style.css

sass --watch --style compressed style.scss:style.css

Comments


// single line comment
// will appear only in the SCSS file

/* multiline comment
   will appear in the CSS file – unless compressed */

/*! multiline comment
    will appear in the CSS file – even when compressed */

Nesting styles


h1
{
  color: blue;

  span
  {
    color: gray;
  }
}

Will output:


h1 {
  color: blue;
}
h1 span {
  color: gray;
}

Nesting namespaced properties

Some properties like font, text and background can be nested in themselves:


h1
{
  font:
  {
    family: Georgia, "Times New Roman", serif;
    size: 137.5%;
    weight: thin;
  }
  color: blue;
}

will output:


h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 137.5%;
  font-weight :thin;
  color: blue;
}

Parent selector


input
{
  border-color: gray;

  &:focus
  {
    border-color: orange;
  }
}

Will output:


input {
  border-color: gray;
}
input:focus {
  border-color: orange;
}

.advert button
{
  font-size: 100%;

  .billboard @
  {
    font-size: 200%;
  }
}

Will output:


.advert button {
  font-size: 100%;
}
.billboard .advert button {
  font-size: 200%;
}

$ variables


$color-main: rgb( 240, 139, 29 );
$color-accent: rgb( 141, 198, 63 );

h1
{
  color: $color-main;

  span
  {
    color: $color-accent;
  }
}

Color helpers


$main-color: rgb( 240, 139, 29 );

$main-color-light: lighten( $main-color, 30% );
$main-color-dark: darken( $main-color, 30% );

@mixin and @include


@mixin section-style
{
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba( 0, 0, 0, .7 );
}

div
{
  @include section-style;
  color:#rgb( 51, 51, 51 );
}

Will output


div {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba( 0, 0, 0, .7 );
  color:#rgb( 51, 51, 51 );
}

Mixin variables


@mixin border-radius( $radius )
{
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

div
{
  @include border-radius( 4px );
}

Mixin variable defaults


@mixin border-radius( $radius:10px )
{
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

div
{
  @include border-radius( 4px );
}

section
{
  @include border-radius; // no value here so default will be applied
}

Will output


div {
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
section {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

Mixins with multiple variables


@mixin box-shadow( $x:0, $y:0, $blur:4px, $spread:0, $color:black )
{
  -webkit-box-shadow: $x $y $blur $spread $color;
     -moz-box-shadow: $x $y $blur $spread $color;
          box-shadow: $x $y $blur $spread $color;
}

div
{
  @include box-shadow( 0, 1, 10px, 0, rgba( 0, 0, 0, .7 ) );
}

section
{
  @include box-shadow( $blur:12px, $color:rgba( 0, 0, 0, .8 ) );
}

Nested mixins


@mixin border-radius( $radius:4px )
{
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixin box-shadow( $x:0, $y:0, $blur:4px, $spread:0, $color:black )
{
  -webkit-box-shadow: $x $y $blur $spread $color;
     -moz-box-shadow: $x $y $blur $spread $color;
          box-shadow: $x $y $blur $spread $color;
}

@mixin div-style
{
  background-color:white;
  @include border-radius( 6px );
  @include box-shadow( $x:2, $blur:10px );
  color:rgb( 51, 51, 51 );
}

div
{
  @include div-style
}

@extend


div
{
  background-color: white;
  border:1px solid gray;
  margin-bottom: 1rem;
}

section
{
  @extend div;
  color: rgb( 102, 102, 102 );
}

Will output:


div, section {
  background-color: white;
  border:1px solid gray;
  margin-bottom: 1rem;
}
section {
  color: #666666;
}

Extending with %placeholders


%default-text
{
  font: {
    size: 100%;
    family: Georgia, "Times New Roman", serif;
    weight: normal;
  }
  line-height: 1.3;
  color: rgb( 51, 51, 51 );
}

div
{
  @extend %default-text;
}

section
{
  @extend %default-text;
}

header
{
  @extend %default-text;
}

aside
{
  @extend %default-text;
}

Will output:


div, section, header ,aside {
  font-size: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  line-height: 1.3;
  color: rgb( 51, 51, 51 );
}

Having used a mixin, on the other hand, would have resulted in:


div {
  font-size: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  line-height: 1.3;
  color: rgb( 51, 51, 51 );
}
section {
  font-size: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  line-height: 1.3;
  color: rgb( 51, 51, 51 );
}
header {
  font-size: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  line-height: 1.3;
  color: rgb( 51, 51, 51 );
}
aside {
  font-size: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  line-height: 1.3;
  color: rgb( 51, 51, 51 );
}

Merging style sheets with @import

Save separate concerns in separate style sheets and then merge them into one using SASS:


@import "reset.scss";
@import "vendor-prefixes.scss";
@import "typography.css";
@import "brand-colors.css";