Multiple component Sass files

If you are looking for splitting up your component Sass in to multiple files, you have 2 options.

Ask yourself: do you want to end up with multiple CSS files or just with 1 CSS file made up from multiple Sass files?

Multiple CSS files #

There is no limit to how many .scss files you can have inside a component. If the component could benefit, from splitting it up a .scss file, you have the flexibility to do so. Each .scss file you create will create its corresponding .css file.

Remember in this case to link both CSS files in yourlibraries.yml!

my-component
dist
css3-full Created with Sketch.
my-component-theme.css
css3-full Created with Sketch.
my-component-layout.css
sass Created with Sketch.
my-component-theme.scss
sass Created with Sketch.
my-component-layout.scss
YAML Created with Sketch.
libraries.yml
my-component:
  version: VERSION
  css:
    component:
      dist/my-component-layout.css: {}
      dist/my-component-theme.css: {}

Sass partials #

If you don't want multiple CSS files, you could choose for using partials. The Gulp setup is smart enough to not compile .scss files  that start with an underscore _.

my-component
dist
css3-full Created with Sketch.
my-component.css
_scss-partials
sass Created with Sketch.
_layout.scss
sass Created with Sketch.
_theme.scss
sass Created with Sketch.
my-component.scss

@import "sass-essentials";
@import "_scss-partials/_layout";
@import "_scss-partials/_theme";

.my-component {...}

YAML Created with Sketch.
libraries.yml