Sass-essentials

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

my-theme

_sass-essentials

_mixins.scss

// define mixins here

_variables.scss

// define variables here

sass-essentials.scss

@import '_mixins.scss';
@import '_variables.scss';

components

global

dist

style.css

html {...}
body {...}
p {...}
.page {...}
.region--content {...}

_scss-partials

_elements.scss

html {...}
body {...}
p {...}

_layout.scss

.page {...}
.region--content {...}

style.scss

@import 'sass-essentials';

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

component-a

component-a.scss

@import "sass-essentials";

.component-a {...}

dist

component-a.css

.component-a {...}

component-b

my-theme.info.yml

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, …