envone / ember-runner

EmberJS preview and build tool for Node.JS
MIT License
50 stars 6 forks source link

less/css @import functionality #39

Open SamuelTilly opened 11 years ago

SamuelTilly commented 11 years ago

As i see it ember-runner automatically loads in every less file from css folder into a unified css.

As a small test i made two files, a.less and b.less and looked at what i would get. The generated file comes out this way:

a:after {
  content: "second file in alphabetic order (b.less)";
}

p:after {
  content: "first file in alphabetic order (a.less)";
}

So first files content comes last. It could be important to know at what order css is outputed so that overwrites and such will work as intended, maby add the ability (if not present) to select an main.less/css file and utilize @import for every other file style file.

Also twitter recess might be useful when compiling less files https://github.com/twitter/recess/ very nice to have the ability to do a mini version of the style when deploying.

envone commented 11 years ago

Hi, @eldamar as a quick response you can do (as I actually do) that with stly and use @import and styl uses a nice plugins named nib to help you to make many shortcuts quickly like gradients for many browsers and is included in ember-runner, maybe you like it: http://visionmedia.github.com/nib/. (stylus info: http://learnboost.github.com/stylus/)

@import "nib"

and for importing and global.styl you can do:

@import "vendors/envone-desktop-ui/packages/envone-ui/css/globals" (without the styl)

And for you petitions should be great to add recess, because will be easy to add because work on node.js too, the only problem that I have with less is that I can't generate without output a file, less forces to generate a file, have you noticed that? I have an open issue that talk about it. https://github.com/envone/ember-runner/issues/2

If you find a way to avoid generating a file, I think that we can build a more robust handler for less with recess.

thx.