SCSS & Post CSS

Ignition uses the scss version of sass. The files are compiled into main.css. This file is already added to the theme and enqueued in functions.php for you. It’s good to get to know the structure of the files and folders:

Folder Structure

The sass files can be found under assets/sass.
There you can edit files or add your own.

By default there are four sass folders:

• Core
  • Files that set up the theme. From mixins to variables to the css grid included. These are the css files that are needed for all the other files. You probably will only need to touch the variables.scss file in here.
• Libs
  • Any libraries included. By default normalize and outdated_browser are included. 
• Global
  • Any styling and layout files that appear globally on the site. Menus, typography, sidebars, panels and the top of the site.
• WordPress
  • Any styling for specific WordPress items, like comments, and default Gutenberg blocks.
• Elements
  • This holds all the elements that appear on your site from forms, to actual content. The bulk of your styling is done in here.

All five folders, and their contents are imported into main.scss. Each folder has a file with the same name that just imports all the others neatly. The result is one compiled file main.scss.

The CSS Output Files

Note that with sass, files that start with an underscore will not compile into their own css files; rather they are meant to be parts that need to be imported into a non-underscored file for final output. Therefore, the only css files being output by sass are main.scss, login-style.scss, editor-style.scss, and gutenberg-editor.scss and admin.scss.

When adding new files that are to be part of mian.scss, add them and make sure they start with an underscore. You will then need to @import them into either main.scss or one of the subfolders files that have imports.

Style.CSS

WordPress needs a style.css file for a theme to load properly. This file holds the theme name and info and the version of the theme. This file is not touched by sass. It has automatically been enqueued and is loaded for you.

You can use this file to include styles that you, for some reason, don’t want touched by sass. It can be useful, if you need to make quick changes to a site in a few months from now and don’t want to have to compile the sass files.

Cache Busting

The style.css file is also useful for cache busting. If you do not see your changes live on your site, you can change the version (IE from 1 to 1.2). This will update any enqueued files to use 1.2 and thus bust the cache.

WP-SCSS

There is a great plugin wp-scss which can compile sass on the server directly! You can download it and activate the plugin. Make sure to point the path in the plugin’s settings to the sass folder.

Post CSS

After the css is compiled it will run through Post CSS. This means you can use the latest css and have it output fallbacks for old browsers. One of the big features ignition uses is css custom properties. Ignition now uses css variables where possible.