the new guy here. I've been looking for a good solution to using Stylus (piled CSS) client side.
Now, I know the tips regarding not using piled CSS client side because:
- It breaks if JS is not in use.
- It takes extra time to pile in a live client environment.
- It needs to be repiled at every single client, which just isn't green.
However, my environment is an extension made for Chrome and Opera. It works in a JS environment and it works offline, so neither 1, 2 or 3 applies. What I'm really looking for here is just a way to write CSS more efficiently with less headaches, more variables, nesting and mixins.
I have tried Less, which is the only one of the trio Less, Sass and Stylus which currently works nicely client side. So, does anyone know a good solution for Stylus?
the new guy here. I've been looking for a good solution to using Stylus (piled CSS) client side.
Now, I know the tips regarding not using piled CSS client side because:
- It breaks if JS is not in use.
- It takes extra time to pile in a live client environment.
- It needs to be repiled at every single client, which just isn't green.
However, my environment is an extension made for Chrome and Opera. It works in a JS environment and it works offline, so neither 1, 2 or 3 applies. What I'm really looking for here is just a way to write CSS more efficiently with less headaches, more variables, nesting and mixins.
I have tried Less, which is the only one of the trio Less, Sass and Stylus which currently works nicely client side. So, does anyone know a good solution for Stylus?
Share Improve this question asked Jul 5, 2012 at 22:16 Michael JohansenMichael Johansen 5,1167 gold badges33 silver badges50 bronze badges4 Answers
Reset to default 4CSS Preprocessors aren't actually meant to be run client-side. Some tools (i.e. LESS) provide a development-time client-side (JavaScript) piler that will pile on the fly; however, this isn't meant for production.
The fact that Stylus/Sass do not provide this by default is actually a good thing and I personally wish that LESS did not; however, at the same time, I do realize that having it opens the door to people that may prefer to have some training wheels which can help them along in the beginning. Everyone learns in a different way so this may be just the feature that can get certain groups of people in the door initially. So, for development, it may be fine, but at the time of this writing, this workflow is not the most performant thing to do in production. Hopefully, at some point, most of the useful features in these tools will be added to native CSS then this will be a moot point.
Right now, my advice would be to deploy the piled CSS only and use something like watch or guard or live-reload or codekit (or any suitable equivalent file watcher) in development so your stylus files are getting re-piled as you code.
This page likely has the solution: http://learnboost.github.io/stylus/try.html
It seems to be piling Stylus on the fly.
Stylus is capable of running in the browser
There's a client
branch available in the GitHub repo
I don't totally understand your question but I'll offer some of the experience I've have with piled css using LESS.
Earlier implementations needed javascript to pile the LESS files into CSS in the browser, I've never tried to work this way didn't seem that great to me and as you say if JS is switched off your in for a rough time.
I've been using applications recently to pile the LESS code into valid CSS, this gets around the need for JS to convert the source code.
The first application I used was crunch http://crunchapp/ which worked quite well but didn't pile the css on the fly.
The application I'm using now is called simpless http://wearekiss./simpless and this creates valid css on the fly so as soon as I've hit save in sublime text and refresh in the browser I can see my changes to the css.
Using this work flow, I'm able to get around the issues your raised above, when I'm done doing development I just upload my css file outputted from simpless which is also heavily minified which also saves time in terms of needing to optimise the css further.
I hope I have understood the question correctly, if not apologies.
Cheers, Stefan