You want control of the Genesis Child Theme you’ve bought. And Genesis makes it pretty simple to modify and tweak. Doing this the wrong way can result in irreversible problem code (no more ctrl-z after you close out, right?), or even a dead theme.
Do it this way and you’ll have clean, modulated code that you can easily maintain.
The sweet little SASS solution I worked up for this has a few steps:
- Make new folder for your SASS files in the child theme’s main directory
- Copy ‘style.css’ into this new folder
- Rename ‘style.css’ › ‘style.scss’
- Create custom SASS files (these are where your original styles will go)
- Imports! – Here’s where the magic happens. This step allows us to create custom CSS in a module fashion without even touching the original ‘style.css’ document.
- Spit out ‘style.css’
So let’s dig in, the detailed steps are below!
* Just to be clear, this article assumes that you understand the basic premise and usage of SASS (if you don’t, start learning!), and that you are the kind of person who is willing to invest in good tools for your craft.
Detailed step-by-step for taking control of your Genesis Child Theme’s styles with SASS:
1. Make a folder for your SASS files in the main Child Theme Directory
Name it ‘sass’ or ‘css’ or whatever you feel like. I like to go with ‘SASS’. Note that none of these files will actually be referenced or used on the live site. You don’t even need to load the folder to the live site.
2. Copy ‘style.css’ into this new folder
This allows us to preserve the original Child Theme styles. We’re going to make a crucial change to this copied file in the next step, which will allow us to import it via SASS.
3. Rename ‘style.css’ › ‘style.scss’
Once you do this, the file will be transformed to a SASS document and can be freely imported by other SASS files like so:
4. Create custom SASS files
I tend to create at least 2 files:
- ‘custom.scss’ for my main sitewide style customizations
- ‘variables.scss’ to collect variables for colors, formatting, etc; and for all my awesome SASS mixins
5. Get your imports in line!
Here is where things get a little technical. The SASS importing ability is what allows us to keep our original code safe, and get modular! If you’re familiar, I’m assuming you already have a tool to process your files. If you don’t I highly recommend CodeKit.
Here’s how your imports will work:
- custom.scss – drop in ‘variables.scss’ at the beginning of the file, so you can use all your variable goodiness throughout your styles.
- style.scss – drop in ‘custom.scss’ at the end of the file. This will allow your tagged on custom styles to take over the original styles higher up.
6. Spit out ‘style.css’
If you’re using CodeKit, this will be a breeze!
Select ‘style.scss’ › Go to the file output box › Click the folder › Select the Child Theme root folder
Here’s where you have to be careful. The CodeKit default is to set up a folder called ‘css’ and drop the processed file in there. By navigating to the root folder instead, you’ll be overwriting this default.
Since you imported all your other SASS files, they won’t create an output — only ‘style.scss’ will!