Jump to content


Photo
- - - - -

Customizing with LESS (vs. CSS) with the "child theme "method"

LESS CSS Child

  • Please log in to reply
1 reply to this topic

#1 erwanlescop

erwanlescop

    Member

  • Members
  • 26 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 18 January 2013 - 06:49 AM

Hi,

I would like you to provide me explanations and clarifications pertaining custom LESS, especiallay versus custom CSS, using the "child theme method".

The following CSS snippets do not fully work using the a "child CSS" (whereas they work with the two other customization methods i.e. site options \ custom code and customize plugin). By contrast, they DO fully work when put in a "child LESS".

  • Example #1 : a custom class of y own

.astuce p {background-color: orange;}

.astuce p:before {content: url('..images/everything-spritev2.png');}

.astuce p:after {content: "\2713"}

 

The first rule only works when put in my child "style.less" file. Mixing Pagelines overriding IDs such as #page or #site and/or CSS important declaration in a child "style.css" was fruitless. The two last rules work whatever the method.

  • Example #2 : a widget class ("Google Doc Embedder" - GDE)

a.gde-link:link {

    font-size: 80%;

    font-variant: small-caps;

    color: green;

}

 

The color property only applies when put in a child "style.less" file. the two first properties work whatever the method.


Is this all logical for you, and if so WHY  ? Am I wrong or right when thinking there IS a difference here when using LESS vs. CSS, one way or the other?
 

Moreover, could you confirm me a "child LESS" file is grouped together with all other Pagelines LESS files and dynamically compiled, contrary to a "child CSS file" ? If this indeed the case, should I expect a major benefit from this, or not really ?

Thank you so much in advance for your comments and clarifications... !

Best regards,

Erwan



#2 Rob

Rob

    One Smart Egg

  • Moderators
  • 9,866 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 January 2013 - 10:59 PM

Hi Erwan,

 

You may wish to check some of the information provided by one of the developers who implemented LESS; 

Please Login or Register to see this Hidden Content

 

There's a panel here explaining why LESS only works in the style.less and not the style.css -

Please Login or Register to see this Hidden Content

So you're correct, there is a difference.

 

Hope this helps.







Also tagged with one or more of these keywords: LESS, CSS, Child

Click to return to top of page in style!