WordPress Twenty Seventeen Theme Sass
These Sass modules make customizing the
style.css a lot easier for the new business focused Twenty Seventeen default theme for WordPress 4.7 released a couple weeks ago.
October 6, 2020 – Sass has been updated for the Twenty Seventeen theme version 2.3 which comes bundled with WordPress. This update converts the changes from wp-content/themes/twentyseventeen/style.css into the respective Sass partials.
The individual Sass partials in this repository represent each of the WordPress Twenty Seventeen
style.css stylesheet numbered and annotated sections. The responsive media queries have also been split out into modules for each of the 5 breakpoints. As was done with the Twenty Sixteen Sass modules, all of the fonts and colors have been converted into Sass variables for quick and easy customization.
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.
Install the files into the
To recompile the Twenty Seventeen stylesheet
style.cssfrom the scss files, first run
npm installto get the dependencies.
# installs dependencies npm install
Then run the gulp task that will compile them
# compile into styleheet gulp css