To understand this part of the documentation, it helps to keep in mind that browsers don’t read Sass. Sass is merely a tool to generate CSS. With that in the back of our minds, that’s also how we implement Sass in to the Compony-theme.

Understanding the difference between these 2 categories of Sass is important because of where you can write Sass in the theme. There are 3 locations of where you could write Sass and each location has a different impact on your theme’s output.

CSS-generating Sass #

This is most common type of Sass, in this example let's see a css-only component:

my-component
dist
css3-full Created with Sketch.
my-component.css
.my-component {
  color: #333;
}
sass Created with Sketch.
my-component.scss
@include "sass-essentials";

.my-component {
  color: $c-grey;
}

none-CSS-generating Sass #

Some Sass won’t generate CSS on it’s own, for example if you define variables or mixins. Let's take the same example again:

my-component
dist
my-component.css
 // empty file

sass Created with Sketch.
my-component.scss
$c-grey: #333;

@mixin button {
  color: red;
}

This component now has an empty CSS file. Mixins and variables are meant to be used as internal methods within Sass, and when compiled on their own, won’t output any CSS.

Why is this relevant? Because it's important to think of this distinction when knowing where to write Sass. (see next chapter)