Would be nice if we could support the Drupal way of searching for a xxx-rtl.css.less file when viewing a. rtl page not only for files included by Drupal / theme.info, but also those @import'ed via the less/css @import command.

My current css stack looks like this: style.css.less @import's grid-custom.css.less which in turn @import's semantic.gs.css.less.
In this situation it would be crucial if lessphp processed the rtl versions of the @import'ed files as well. I can't load the grid css files via thze theme.info for the obvious scope reasons.

Current solutions are placing all css.less in one single file plus the corresponding -rtl.css.less file, or using inline 

html[dir="rtl"] & { 
  /* RTL rules */
}

in combination with selectivizr.

Comments

corey.aufang’s picture

corey.aufang commented

RTL support in LESS is really more of just naming your files with .css.less and letting Drupal handle the rest. So if Drupal does it, LESS can do it, as long as you name end your files with .css.less .

Personally I suggest using the method in the sample you provided. It should only require selectivizr if you need IE6 support as simple attribute selectors are supported by IE7+ http://caniuse.com/#feat=css-sel2

Also, for sanity's sake when maintaining your stylesheets I find it makes more sense, and saves time to use ampersand (&) selectors in LESS.

When you use an ampersand selector, you put the special tweak immediately next to the code that you are tweaking, rather than placing it in an entirely other file. This helps to ensure that when a change is made you can easily see other special changes that also need to be made.

This can be used to effect when targeting versions of IE. Here is the opening tag from HTML5 Boilerplate, which I used elements from in my themes adapted for Drupal:

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]>
<html class="no-js ie6" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<![endif]-->
<!--[if IE 7 ]>
<html class="no-js ie7" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie8" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<!--<![endif]-->
<head>

This allows you to easily target a specific version of IE by doing a style like:

.ie7 & {

}

You can place that in any style and it instantly now applies to that version of IE and no other browsers.

derPaolo’s picture

derPaolo commented

yup, that's what I ended up doing.
also, for IE6 support, one could add a conditional class like 

<!--[if lt IE 7 ]>
<html class="no-js ie6 <?php print $language->dir ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<![endif]-->

and select via .rtl &. only downside is that due to right-to-left stylesheet parsing, this feels more costly than html[dir=rtl].

corey.aufang’s picture

corey.aufang commented
Status: Needs review » Closed (fixed)

Here's a good reference on CSS selector speed:

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

corey.aufang’s picture

corey.aufang commented
Status: Closed (fixed) » Closed (works as designed)

Oops, wrong status.