Styling

Introduction

All styling within SocialStack uses SASS (https://sass-lang.com/guide). As this is a superset of CSS, any valid CSS can be used, but it's worth taking the time to get to grips with SASS syntax and the built-in functions it provides, as these can both save time and improve the readability of your styles. Please note, SocialStack uses SCSS syntax rather than the old SASS indented syntax (see https://sass-lang.com/documentation/syntax).

Filename conventions

All SASS stylesheets within a SocialStack project are combined and included within the resulting site. Changing the order in which these files are combined (and thus potentially affecting the cascade, causing overlapping rules to be overridden or not) can be done by adding a value from 1-100 within the filename itself, e.g. foobar.50.scss (SCSS files without a value default to a level of 100).

Styles which include definitions which should be available to the entire project (e.g. SASS variables, mixins, etc) should be prefixed with "global.", e.g. global.variables.scss.

There's no need to minify your styling as this is handled by the compiler.

Theme styling

[TODO] Styles can be defined at both the theme and component level - theme styles are global and available throughout the SocialStack site.

Component styling

Each SocialStack component includes optional styling - for instance, running socialstack generate UI/FooBar in a SocialStack project folder will create both UI/FooBar/FooBar.js for the component itself, along with UI/FooBar/FooBar.scss - this can then be used to define component-specific styling.