Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Tom Nunn
Tom Nunn
16,333 Points
Posted by Tom Nunn
Tom Nunn
16,333 Points

Converting WordPress Child Theme CSS to Sass

Just started watching CSS to Sass by Guil Hernandez, I'm looking to convert the CSS to Sass in a WordPress Child Theme.

The WP Child Theme did NOT have a CSS directory to begin with and has two stylesheets (style.css and rtl.css) which are located in the theme folder (/child-theme/style.css).

I have created a scss directory and moved the style.css into the directory changing the extension to .scss.

I then ran the command:

sass --watch scss:css

Which then creates a CSS directory along with the expected CSS files. I would assume the Site should now look like it did before, but it seems there are some styles which aren't loading.

I guess this could be because I need to somehow add a function in functions.php, stating that style.css is now inside a NEW Directory called 'CSS' and the Styles which I am seeing are from the rtl.css stylesheet ().

I've looked at some other Child Themes which use Sass and they don't seem to put the style.css in a CSS Directory.

I'm not sure if this makes that much of a difference or not?

Tom Nunn
Tom Nunn
16,333 Points
Tom Nunn
Tom Nunn
16,333 Points

Thanks for the help Jonathan, there are no Errors in the Console (I wish there was, it would help...) or in the browser. The really odd thing is the Widget areas in WP Dashboard disappear when adding Sass - how is this even possible!? I went for lunch as soon as I saw that happened...

Along with the Theme's Screenshot File, I can still change the Theme information (i.e Name, Description, Author, Tags, etc.) through the .scss file so I guess it shows it's compiling the css file as it should.

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You'll find that different WordPress themes will have slightly different directory structures depending on how they're developed but the principle should always be the same.

Enquire the file with the relative file path to your CSS files which in this case are the output CSS files for your SASS.

Tom Nunn
Tom Nunn
16,333 Points
Tom Nunn
Tom Nunn
16,333 Points

Thanks Jonathan, it seems the style.css is being called okay when in the CSS Directory. I just tried deleting the Sass generated files and moved the orginal style.css into the CSS Directory. Which is working fine, as soon as I move this file back to the Scss Directory and rename it back to the .scss extension and run the --watch command it seems to break the design.

Even to the extent where the Widget Areas of the Child Theme no longer appear - how is this even relevant? I thought I had a reasonable understanding of WordPress Development until this happend haha.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Is there some sort of SASS syntax error that's causing the design to break? Obviously you've been able to generate CSS with a valid SCSS file the only reason I can think of for the design break is some sort of error that's stopping some of the code compiling. :-)

Maybe a class name that's not being picked up by the compiled CSS? :-)

Tom Nunn
Tom Nunn
16,333 Points
Tom Nunn
Tom Nunn
16,333 Points

How odd, I'm not sure how you would go about spotting a Sass syntax error. Should Regular CSS not just pass through as Sass regardless? If not what should you look out for?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

If there's bad syntax in your SCSS file, the CSS will not compile and install you'll get error messages in both the browser and the console you're trying to run the watch command from. Have you come across this before?

I'm afraid I'm just speculating here. There could be a number of reasons why the styles are not compiling properly. For example you might need multiple CSS files in your project but Sass only compiles to one output CSS file (at a time) *I may be wrong about that too :)