Importing variables #

To use the variables defined inside the _sass-essentials folder, you need to  import the sass-essentials on top of each .scss file like this:

sass Created with Sketch.
my-component.scss

@import "sass-essentials";

Variable naming convention #

When defining variables we use the first letter of each word as a prefix for our variable.

For example colors:

sass Created with Sketch.
_colors.scss
$c-red: #FF0000;
$c-grey: #CCC;

font-weights:

sass Created with Sketch.
_variables.scss
$fw-bold: 600;
$fw-regular: 400;
$fw-thin: 200;

break points:

sass Created with Sketch.
_variables.scss
$bp-xs: 20rem;
$bp-s: 40rem;
$bp-m: 60rem;
$bp-l: 75rem;

Sass comments #

If you want to write comments inside Sass, make sure you write them in a way that they don't generate CSS when compiled.

This component will have comments in CSS because it uses the /* format */:

my-component
dist
css3-full Created with Sketch.
my-component.css
/* This is a comment */

.my-component {
  display: block;
}

sass Created with Sketch.
my-component.scss
/* This is a comment */

.my-component {
  display: block;
}

Instead, write comments using the // format:

my-component
dist
css3-full Created with Sketch.
my-component.css
.my-component {
  display: block;
}

sass Created with Sketch.
my-component.scss
// This is a comment

.my-component {
  display: block;
}

The internal reason why is that the notation with // are for Sass only, and is not valid CSS. Therefor any Sass compiler will automatically strip those comments away. 

This is especially relevant for any Sass you write inside the _sass-essentials folder, as those files will get imported in to each component!

This could greatly bloat your CSS files:

my-theme
_sass-essentials
sass Created with Sketch.
_sass-essentials.scss
/* colors */
$c-grey: #CCC;
$c-black: #000;
$c-white: #FFF;

/* breakpoints */
$bp-s: 20rem;
$bp-m: 40rem;
$bp-l: 60rem;

/* Font-weights */
$fw-thin: 200;
$fw-medium: 400;
$fw-thick: 600;

components
node
dist
css3-full Created with Sketch.
node.css
/* colors */
/* breakpoints */
/* Font-weights */

.node {...}

sass Created with Sketch.
node.scss
@import "sass-essentials";

.node {...}

taxonomy-term
dist
css3-full Created with Sketch.
taxonomy-term.css
/* colors */
/* breakpoints */
/* Font-weights */

.taxonomy-term {...}
sass Created with Sketch.
taxonomy-term.scss
@import "sass-essentials";

.taxonomy-term {...}