Use any CSS compiler (Sass, Less) to generate the selector

Question

So I've recently been playing around with CSS compilers, but I have no idea how (or if it's possible) to dynamically generate pieces of a selector.

For instance, let's say I wanted to make mixins to get

display: inline-block; 

to work cross browser. I would have to do the styles, yeah, but I would have to do the IE6/7 selector hacks to get them to work in those browsers too. Ideally I'm looking for a one off thing to add to an element and have the ability for that to work. Some kind person recently gave me this solution: http://stackoverflow.com/questions/2746754/css-compilers-and-converting-ie-hacks-to-conditional-css/2747036#2747036

and it would be nice to implement that in a minimal way that would allow me to specify it for a given element and be on my way (for instance in Less, you can create a class with styles, pass that class to another element, and that element will inherit all of those styles. It would be nice to pass an element .inline-block; and it create the styles needed to support IE6/7 without having to resort to stuff like

_color: pink; 

Any ideas?

EDIT: for instance as well, how could I do something like clearfix for LESS? (lesscss.org)? If Sass can only do it then that will work too.

Answer 1

So I did some digging in the documentation, and some experimentation, and Sass (to my relief) supports this, though I don't think LESS does (which is why it's getting dropped in favor of Sass).

You can use the ampersand as a pointer to the selector you used in the definition, and the position of that ampersand in a nested declaration doesn't have to be at the front, you can put selectors before it. For instance, you can use conditional IE tags on to target IE in the same stylesheet in a way that doesn't use hacks. The following uses the SCSS notation (but should work fine with the indentation notation):

@mixin inline-block {

// Cross browser implementation of the inline-block attribute

  display: inline-block;
  body.ie6 & { display: inline; }
  body.ie7 & { display: inline; }

}

And all you have to do is drop this on anything you want:

#foo { @include inline-block; }

and it will generate/manage all the your inline-block stuff cross browser:

#foo { display: inline-block; }
body.ie6 #foo { display: inline; }
body.ie7 #foo { display: inline; }

Semantic way of handling cross-browser issues, no more having to deal with the cumbersome method of managing 2 different files for styles (which is asinine to me), no more code block eyesores.

Edit: Of course that functionality was stated in the old documentation, not in the new, which is why I couldn't find it.

Answer 2

A cross-browser implementation of inline-block is provided by compass, a framework built on top of sass:

http://compass-style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss