Getting Started with Sass for a Wordpress Theme

I'm currently in the process of updating the style of my blog, which is powered by Wordpress, using a custom theme I'm developing. As frontend web development is new to me, I set out to research different technologies and I decided to use Sass instead of vanilla CSS. At first, I had some trouble getting a nice, fluent Sass workflow with Wordpress. If I had trouble, I'm sure there are tons of other people who are struggling too and could use some help. Here are some (fairly opinionated) steps for styling your Wordpress theme with Sass.

  1. In the root of your Wordpress theme's folder, create a subfolder and name it `sass`.
  2. In `sass`, create a file called `style.sass` (or `style.scss` if you wish to use the CSS subset of Sass). This file should include the header information for your theme that you would normally add to the `style.css` file required for your Wordpress theme.
  3. When writing your Sass source code, use a separate file for each individual type of item you're styling, and you must prefix each file with an underscore.
    1. For example, you might have a `_single-post.sass`, `_page.sass`, etc.
    2. Why must you use have the underscore? When watching a directory for changes to its files, Sass will generate a CSS file each Sass source file that does not start with an underscore. These are called partials. They're for separating the concerns of our Sass source, and will be combined later on by the compiler.
  4. In `style.sass`, add an @import for each partial you've created. Each @import should omit both the underscore and the file extension. Here's an example:
  5. Great! All the files should be setup now. We just need the right magic on the command line for Sass to generate the `style.css` file needed for your Wordpress theme.
    1. Open a terminal, and change the current directory to the root of your Wordpress theme.
    2. Run the command `sass --watch sass/:.That's it.
    3. This works because the only file without an underscore in the `sass` directory is `style.scss/sass`, so it will only create a corresponding `style.css` in the current directory (the format for the --watch command with folders is `<folder to watch>:<output folder>`).
    4. Note: This will also regenerate your `style.css` when you change the content of your partials, since they are @imported. Magic.
  6. Now, just edit your styles and your `style.css` will be regenerated each time you make a change!

 

I hope you found this helpful!

P.S. Need a developer for a project? I'm available for freelance software development.