Ignition uses the
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 thecss files that are needed for all the other files. You probably will only need to touch the variables.scss file in here.
- Files that set up the theme. From mixins to variables to the
- 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.
- Any styling and layout files that
- 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
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
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
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-
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.