Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 11, 2016 at 4:16 pm #630808
    jambrikp

    Hi,

    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.

    Looking for Sass or Less files for Enfold themes

    Best regards
    Peter

    May 11, 2016 at 5:52 pm #630865
    jambrikp

    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:
    https://www.solitr.com/blog/2014/01/css-preprocessor-benchmark/

    May 12, 2016 at 1:06 pm #631319
    Josue

    Hi,

    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,
    Josue

    May 12, 2016 at 1:47 pm #631356
    jambrikp

    Hi,

    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,
    Peter

    May 12, 2016 at 2:16 pm #631386
    Josue

    Hi,

    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,
    Josue

    • This reply was modified 8 years, 6 months ago by Josue.
    May 12, 2016 at 2:47 pm #631410
    jambrikp

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

    Best regards
    Peter

    May 13, 2016 at 6:42 am #631835
    Rikard

    Hi Peter,

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

    Regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.