How is styling done in Sage 9?

sage
1

I’ve read the sage documentation and github documentation line by line, dug through the WordPress Codex as well as the Roots discourse and I still can’t seem to find any mentions of how basic styling should be accomplished in Sage 9. Should all my custom classes go in _global.scss or can I split them up into components (e.g. _hero.scss or _slider.scss) or even pages (e.g. _home.scss or _contact.scss? Links welcome (just preferably none that I’ve already included here)!

2

This is up to the web developer.
For example, you may use a common/ folder for the styles that don’t result in normal CSS but rather define variables and mixins. Like palette, fonts, z-indices. Then I create a blocks folder for styling Gutenberg blocks. The layout folder is for styling the pages themselves.

1 Like
3

Okay , this makes sense. I guess my question then would be how do you connect a _example.scss file in the block folder that you’ve created to the block’s example.blade.php file? Is this more of a Laravel question? New to WP theme development (I know, I know I shouldn’t be using Sage then) and trying to figure out where basic answers like this can be found. Thank you for your response!

4

Usually all the theme styles are build into one single, minified CSS file that is enqueued by the theme.

The editor styles with editor-specific adjustments are usually split from the frontend styles because only the few backend users need them.

5

You don’t really do this. Sage has no systems to closely tie styles and content together into separate modules like this, and given the way WordPress and Gutenberg are structured it would be very difficult to do inside of a theme. @strarsis is correctly the Sage’s default configuration is to compile all styles to a style.css file for the frontend and an editor.css for the backend.

If you want, you could probably adjust the build process to make multiple styles output files for you. You could enqueue specific css files for specific blocks through the use of register_block_type() and wp_enqueue_script().

1 Like
6

Thanks for the response, this helps so much! I’m coming from a React background, so I’m currently re-wiring my brain…

7

This topic was automatically closed after 42 days. New replies are no longer allowed.