CODEWITHSUNDEEP
javascriptcssgoogle-chrome-extensionstylusopera-extension
Michael Johansen
Michael Johansen

Reputation: 5116

Client side usage of Stylus (CSS)

the new guy here. I've been looking for a good solution to using Stylus (compiled CSS) client side.

Now, I know the tips regarding not using compiled CSS client side because:

  1. It breaks if JS is not in use.
  2. It takes extra time to compile in a live client environment.
  3. It needs to be recompiled 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?

Upvotes: 11

Views: 5892

Answers (4)

Steven Pribilinskiy
Steven Pribilinskiy

Reputation: 2002

Stylus is capable of running in the browser

There's a client branch available in the GitHub repo

Upvotes: 2

Wil Moore III
Wil Moore III

Reputation: 7214

CSS Preprocessors aren't actually meant to be run client-side. Some tools (i.e. LESS) provide a development-time client-side (JavaScript) compiler that will compile 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 compiled 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-compiled as you code.

Upvotes: 4

Justin Meyer
Justin Meyer

Reputation: 1687

This page likely has the solution: http://learnboost.github.io/stylus/try.html

It seems to be compiling Stylus on the fly.

Upvotes: 4

Stefan Burt
Stefan Burt

Reputation: 181

I don't totally understand your question but I'll offer some of the experience I've have with compiled css using LESS.

Earlier implementations needed javascript to compile 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 compile 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.net/ which worked quite well but didn't compile the css on the fly.

The application I'm using now is called simpless http://wearekiss.com/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

Upvotes: 0

Related Questions