This page builds on top of labels explained in the previous chapter: Sass categories.

my-theme
_sass-essentials
sass Created with Sketch.
_mixins.scss
// define mixins here

sass Created with Sketch.
_variables.scss
// define variables here
sass Created with Sketch.
sass-essentials.scss
@import '_mixins.scss';
@import '_variables.scss';

components
global
dist
css3-full Created with Sketch.
style.css
html {...}
body {...}
p {...}
.page {...}
.region--content {...}

_scss-partials
sass Created with Sketch.
_elements.scss
html {...}
body {...}
p {...}

sass Created with Sketch.
_layout.scss
.page {...}
.region--content {...}

sass Created with Sketch.
style.scss
@import 'sass-essentials';

@import "_scss-partials/**/*.scss";

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

.component-a {...}

dist
css3-full Created with Sketch.
component-a.css
.component-a {...}

component-b
YAML Created with Sketch.
my-theme.info.yml
YAML Created with Sketch.
my-theme.libraries.yml
my-theme.theme

_sass-essentials folder #

The very first folder we come across is the _sass-essentials folder. In this folder, you should only put "none-CSS-generating Sass", that you want to use in multiple components!

For example: Color definitions, breakpoints, mixins, ... Feel free to refactor the _sass-essentials folder however you see fit, the only thing that you should keep is the _sass-essentials.scss file. This file will be used to inject all the variables, mixins, breakpoints and color definitions in to each component.

_global component #

Any Sass that generates CSS, belongs under the "components"-folder. And all the Sass that should be loaded on each page of the project, ideally belongs in the _global component.

For example: body font-size, h1-h5 styling, regions, general layout, ...

component-a component #

Any Sass that is specific towards a component, could be abstracted in to it's own component folder. For example: node, taxonomy-term, block, view, …