Skip to bottom for question, but first, a little context.
So I have been looking into CSS compilers (like Sass & Less) for a while, and have been really interested in them, not because they help me understand anything easier (I've been doing css for a couple of years now) but rather they cut down on cruft and help me see things easier.
I recently have been looking into reliably implementing inline-block (and clearfix), which require lots of extraneous code & hacks. Now according to all the authorities in the field, I shouldn't put IE hacks in the same page I do my CSS in, I should make them conditional. But for me that is a really big hassle to go through and manage all this additional code, which is why I really like things like Less. Instead of applying unsemantic classes, you specify a mixin and apply it once, and you're all set.
So I guess I got a little of the track (I wanted to explain my points) but bascially, I'm at the point where these CSS compilers are very useful for me, and allow me to abstract a lot of the cruft away, and reliably apply them once and then just compile it. I would like to have a way to be able to compile IE specific styles into their own conditional files (ala Less / Sass) so I don't have to deal with managing 2 files for no reason.
Does anything like a script/applcation that runs and can make underscore / star hacks apart of their own file exist?
It's not really a compiler trick, but if you want to use conditional comments without having to compile separate per-browser stylesheets, you can simply use HTML conditional comments to inject a styling hook. For example:
...
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
Now you can target rules you want to apply to IE<=6 and IE<=7 in the same stylesheet as the rest of the rules:
body.ie6 #thing { position: relative; }
body.ie7 #otherthing { z-index: 0; }
This is IMO marginally cleaner than the * html hack, which is the last acceptable CSS hack. (The “star hack” and “underscore hack” are invalid CSS: avoid.)
You can just conditionally include a generated CSS sheet for IE6/7/whathaveyou:
<head>
<link rel="stylesheet" href="/css/master.css" type="text/css"/>
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css"/>
<![endif]-->
</head>
Also, if you're worried about mixing in the IE fixes/hacks with the bulk of your SASS/CSS, you can break them up into their own partials:
@import ie6.sass
The above would include all the rules for that particular version of IE in the current SASS document. Documentation on partials can be found here: SASS Partials
This is IMO marginally cleaner than the * html hack, which is the last acceptable CSS hack. (The “star hack” and “underscore hack” are invalid CSS: avoid.)
Not really: while the "underscore hack" is invalid, the "* html" and "*+html" hacks are perfectly valid CSS. Check it out yourself. ;)
~
As for the question above, for now I'm not aware of any compiler able to do that, I still prefer to user the start hack (IE6-7) and keep everything in one file. More maintainable.
