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.

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:

  • Base
    • 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.
  • Libs
  • Global
    • Any styling and layout files that appears globally on the site. Menus, sidebars, panels and the top of the site. The files menu_layout, and sidebar_layout are for layout only. The styling of colors and backgrounds for these can be found in the other files (site_top.scss or sidebar.scss…)
  • Elements
    • This holds all the elements that appear on your site from comments, to forms, to actual content. The bulk of the styling is done in here.

All four 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.

When adding files that are to be part of sass, 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. 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.

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.