Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #630808


    Sometimes clients think-a-great and ask me to change the colors (each colors) :) and do a demo in many many color varians.
    Off course I use simple css syntax color: #D82A2E very fustrating when I should change every color in child’s style.css. :)
    I thought I should use Sass (@mixin, $color etc).. So is it possible?

    If I install Ruby, Sass and Compass and create style.sccs It’s going to work perfect as Enfold child’s style.css?

    Before I never use preprocessors. (Purchase code hidden if logged out) -files-for-enfold-themes/

    Best regards


    Or LESS?
    I just take my style.less into the header?

    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="less.js" type="text/javascript"></script>

    So how can I use preprocessors with Enfold child?

    I found a bencmark about simple Sass and LESS:



    If you include a .scss it won’t work because it’s not meant to work that way, a preprocessor is meant to produce a .css file. LESS does have the option to compile .less files live (less.js), that should work but it will require more set-up.

    Best regards,



    In Sass, I create a style.scss (just the Enfold child style) and the processor produce the style.css… Yes, its okay. So the Sass created child style.css doesn’t will work? But why, because its child?
    In LESS, require more set-up, install, js anything else? What do you think, clinet or server side translate is the better?

    Or do you have any idea how can I solve the recoloring problem?

    Thank you,



    Yes, it will work if you use the .css file, but i forgot about another thing, usually Sass -and similar- strip the comments of the file in order to compile it compressed / minified, this would lead to a problem if you use style.css because style.css is a key theme file that uses CSS comments (/* */) to tell WordPress the theme’s metadata (parent theme, theme name, author, etc).

    As a suggestion, if you use child themes extensively try to not use style.css as your custom CSS file (because of the aforementioned), instead create a /css/ folder in your child theme and use a custom file (ex: main.css), to enqueue it simply paste this in functions.php:

    add_action('wp_enqueue_scripts', function() {
       wp_enqueue_style( 'main-css', get_stylesheet_directory_uri().'/css/main.css', array(), '', 'all' );
    }, 100);

    Regarding the coloring issue, i think it would depend, if you’re on a live server i’d suggest using less.js, however i wouldn’t recommend having that once the site is finished because it could affect the performance.

    Preprocessors are a big topic, maybe it would be better to start testing on a local HTML page and once you get a hang of it transition to the child theme.

    Best regards,

    • This reply was modified 1 year, 10 months ago by  Josue.

    Thank you, Josue! :) The main.css is very interesting and I will try LESS on a test site.

    Best regards


    Hi Peter,

    Great, please let us know if you should need any more help on the topic.


Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.