WordPress Twenty Sixteen Theme Sass

I recently created individual Sass modules for each of the WordPress Twenty Sixteen style.css stylesheet numbered and annotated sections. Additionally, the fonts and colors have been converted into Sass variables. All of this makes customizing this theme easier.

Oct 07, 2020 – Sass has been updated for the Twenty Sixteen theme version 2.2 to be released in coordination with WordPress 5.5.

Source Code

There is also a gulpfile.js included with a task for compiling the .scss files into a new style.css. This task uses cssnano and the workflow described in this post, Sass Workflow Using cssnano and Autoprefixer.

1. Install the files into the /wp-content/themes/twentysixteen folder.

2. To recompile the Twenty Sixteen stylesheet style.css from the scss files, first run npm install to get the dependencies.

   # installs dependencies
   npm install
   

3. Then run the gulp task that will compile them

   # compile into styleheet
   gulp css
   

Resources

• https://github.com/jimfrenette/twentysixteen-sass
• https://wordpress.org/themes/twentysixteen/
• https://github.com/WordPress/WordPress
• http://css2sass.herokuapp.com/