CODEWITHSUNDEEP
cssinternet-explorerconditional-statementsstylesheetstylus
Francisc0
Francisc0

Reputation: 1018

Separating styles into different CSS files from a single Stylus source file

I've been using this technique to create IE conditional stylesheets during development:

http://clock.co.uk/blog/handling-ie-with-stylus

Basically it allows me to write IE specific CSS alongside non-IE styles and it will automatically split it in a new file. For the most part it's been great but if I were to change one thing about it is that it creates 2 full copies of the CSS files, just one copy contains extra IE-specific styles as well. What I would like to do is have only the IE specific styles appear in the separate file.

So if I do something like this in Stylus

/* styles.styl */
.myDiv 
  +ie(8)
    width: 100px
  background: #000
  color: red

.other
  display: block
  width: 10px

I want the 2 files to look like this:

/* styles.css: */
.myDiv {
  background: #000;
  color: red;
 }

.other {
  display: block;
  width: 10px;
}

/* styles-ie8.css: Just the IE specific styles */
.myDiv {
  width: 100px;
}

instead of styles-ie.css ending up like this:

/* styles-ie8.css: */
.myDiv {
  width: 100px; /* <-- includes the extra IE-specific style along with everything else */
  background: #000;
  color: red;
}

.other {
  display: block;
  width: 10px;
}

Just curious if this is possible, thanks!

Upvotes: 3

Views: 248

Answers (1)

Jack
Jack

Reputation: 11

I don't believe this is possible without wrapping the rest of your Stylus in +not-ie() style mixins (obviously not recommended), or extending Stylus somehow.

At Clock we faced the same problem – aiming to serve one stylesheet to every browser, with just the extras going to IE8 in a separate stylesheet. Unfortunately we couldn't find a decent way to handle this.

What we do currently is, as you mention, have a complete copy of the styles in the IE8 stylesheet, along with the IE8 specific styles. The advantage of this is that we now only need to send one stylesheet to IE8 Users, saving them an HTTP request when compared to the above method.

<!--[if gt IE 8]><!-->
link(rel='stylesheet', href='index.css')
<!--<![endif]-->
<!--[if lte IE 8]>
link(rel='stylesheet', href='index-ie8.css')
<![endif]-->

Good browsers, including IE9+ get index.css only. IE8 and lower get index-ie8.css only. No browser gets the same styles twice.

Afraid it's not the solution you're looking for, but at least it's a bit of reasoning behind our decisions.

Upvotes: 1

Related Questions