Puddinq.com sharing knowledge

Compile WordPress twentytwenty sass files

Compile WordPress twentytwenty sass files

WordPress 5.0 is out! and it does not only come with Gutenberg but also with the new theme twentytwenty theme for WordPress. The theme is brilliant in its simplicity but that does not bring much elegance. So what if you want to change the styling? enhance or expand it? How would you start?. There are a number of ways to go about and they will be mentioned below. But the most intriguing question is how to compile the sass as it was done building twentytwenty itself.

/* works for twentynineteen theme as well */

Simple direct adjustments

If work with the theme and you want to change one thing, you might just go to the style.css and change the thing you want. This works quick and instant. The problem rises when there is an update for the theme. The update overwrites every change you made and you would have to do it again when you have run the update. One solution would be to change the name for the theme (in the header of style.css), then updates will be ignored as it is not the twentytwenty theme anymore. Downside is you will miss every improvement and bug fix that will come out.

Overrule the twentytwenty theme

Instead of overwriting the theme, for long, the best solution has been to overrule the theme by creating a child theme. The parent (twentytwenty ) remains intact and updates will improve the theme while your adjustments will stay functional. If you plan to develop a theme based on another theme this is often the best solution.

Using node-sass in the twentytwenty theme

The simple direct adjustment changes the style.css but does not use the sass files and does not compile a new style.css based on the sass files. Therefor all structure and efficiency might be lost in your improvements. To recompile the stylesheet after you have made a change in a sass file you need to have npm installed and recompile the stylesheet.

  • Install npm download
  • Navigate to the theme folder: /content/themes/twentytwenty/
  • Run the command: npm install
  • Make your change in the sass file
  • Run the command: npm run build
  • Your changes are now compiled into a new style.css

Other npm commands

  • npm run build:style
    update the style.css only
  • npm run build:style-editor
    update the style-editor.css only
  • npm run build:style-editor-customizer
    update the style-editor-customizer.css only
  • npm run build:rtl
    update the style-rtl.css only
  • npm run build:print
    update the print.css only
  • npm run build
    update the everything
  • npm run watch
    monitor the changes you make and compile the stylesheets everytime you do