PageSpeed uses SCSS CSS preprocessor to generate the stylesheets. SCSS has some handy colour manipulation features which helped us in building the smart colour schemes and reducing the number of colours you need to select to customize your site by more than 500%. All the variables we use for the generation of styles are stored in two files variables.scss and colours .scss, you can override pretty much any of those variables from the theme options and we ourself override them via colour schemes. In this post, I will explain you the general architecture and everything with respect to how SCSS is implemented.
All the SCSS files are stored under page-speed/assets/css/src.
Any file here can be overridden by a child theme by placing the file with the same at the same location in a child theme.
- Like said above variables.scss and colours.scss hold all the variables we use.
- main.scss loads all the scss files in our order of preference.
- Files prefixed with af- contain the critical CSS required to render the above fold content. In premium version, this CSS is put in the head of the page.
Here is how and the order in which the processing takes place
- /**colors_from_color_scheme**/
First, we take the colours from the colour scheme you choose. - Hue, Saturation and primary colour in the colour scheme are overridden when you enable “Override shades generated from the colour scheme”
- Now we generate the shades from the colours we have from above.
- We use the shades from above to set the colours of various elements on the site like body, header, sidebars, text etc..
- These are again overridden by the colours in colour scheme, you choose.
- Now, individual colours are overridden by the colours you choose at colours and gradients panel.
- Finally, everything above is overridden by the SCSS you write at Override SCSS variables
You don’t have to know SCSS to use or customize PageSpeed. It works in the shadows and is visible only when you want to see it. You can forget that it exists and use the theme like any other theme and customize or override CSS just like you normally do.