[Jeff FParticipant]

With your current setup how would I create a child scss theme? I currently am using the child-icon theme.

[RadModerator]

Hi Jeff,

Thanks for writing in.

You can use import with your child theme’s scss.

For example, we’re using Icon child theme.

/*

Theme Name: X - Child Theme: Icon
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Icon in this child theme.
Version: 1.0.0
Template: x

*/

@import url( '../x/framework/css/site/stacks/icon.css' );
@import url( 'style.scss' );

style.scss should be inside your child theme’s root directory. X core does not have scss files which means there is no need to override by child. And all you have to do is include your own scss at your child theme.

Hope this helps.

[Jeff FParticipant]

So you’re saying all I need to do is create a scss file called style.scss and put it under x-child-icon/framework/scss and include the above code? Or are you saying I’m free to write in the x/framework/scss/style/scss file without it being over overwritten?

What I’m going to do is include this icon into my theme http://codepen.io/bennettfeely/pen/twbyA

Thank you for the clarity.

[RadModerator]

Hi Jeff,

Yes, you have to create your own style.scss under /x-child-icon/ and not under /x-child-icon/framework/scss/. And import it like this @import url( 'style.scss' );

It will not overwritten by update, all files added in child theme will not be overwritten unless you accidentally upload the same child theme with same files.

You’re always welcome.

[axelra82Participant]

When doing this I keep getting
“Resource interpreted as Stylesheet but transferred with MIME type text/plain” in the console log in google Chrome.

Am I missing something? I would also very much like to be able to create custom scss files.

[RubinKeymaster]

Hey There,

sorry for the confusion. You can’t include scss files into the style.css/child theme file. Importing only works with .css files so you first have to compile the scss file into a .css file and then you can import that .css file. There are some plugins for WordPress that can automate that compiling which would resolve that issue for you.

Let me know if you have any additional questions.

[axelra82Participant]

Cool 🙂 Thanks for the clarification.

To anyone else stumbling upon this thread, this is how I ended up solving it for my work-flow…
I use Coda 2 (by PANIC), found this great plugin http://elbongurk.com/2013/11/how-to-use-sass-in-coda/ that automatically compiles (and if you want, minifies) your scss file to a css version in the same folder. So for ease of use I just import the my-custom-style.css in the style.css file (in my child theme folder), and then I can work with the scss file as is. Quick, easy and painless 😉

Happy tweaking everyone!

[RubinKeymaster]

Thank you for sharing this with the rest of the community! 🙂

[axelra82Participant]

But of course, sharing is caring 😉

[RubinKeymaster]

Indeed it is!

[strobleyParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

You have to compile the SCSS file to CSS file first, then import it via child theme.

For more information, you can take a look here:

– https://www.jetbrains.com/webstorm/help/transpiling-sass-less-and-scss-to-css.html
– http://sass-lang.com/documentation/

Hope it helps!

[strobleyParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for the updates.
You can use what ever you are comfortable with. We do recommend Sass since we are using it in X.

Cheers.

[Author]

Posts