Hubro
Hubro

Reputation: 59333

Looking for a Python CSS pre-processor with Stylus-like syntax?

Stylus is a language that compiles into normal CSS. The language is a huge time- and space saver for many reasons. For instance, I can put selectors inside each other:

div.foo
    color: red

    div.bar
        color: blue
        font-weight: bold

    div.baz
        color: green
        background-color: pink

I can also do stuff like make vendor-specific properties work without the prefixes, which saves a lot of space.

My question is: Are there any alternatives to Stylus? I can't really think of a description of what Stylus is, so I'm finding it hard to find any alternatives using Google.

Note: By alternatives, I mean languages that compile into CSS and offer time-saving goodies.


The reason I'm looking for alternatives is that I use Stylus for all my projects, and I want to see if there's a better solution out there. The reason I'm not 100% happy with Stylus is that the TextMate bundle for it is terrible, and Stylus requires Node.js to compile which is also a step I'd like to avoid. I use mainly Python.

Upvotes: 4

Views: 2728

Answers (4)

Jan Willems
Jan Willems

Reputation: 170

There is a Stylus implementation in Python. It's called Stilus and is nearing completion. You find it here: https://github.com/jw/stilus

Upvotes: 2

matiascelasco
matiascelasco

Reputation: 1385

I can't really think of a description of what Stylus is

The term you are looking for is CSS preprocessor.

Check this ones:

  • Less: Unlike Stylus is a css super-set. In other words, every valid CSS document is also a valid Less document. This way is easier to migrate from existing CSS.

  • Sass: Very similar to Less. It has a variant (SCSS) which notation is also a SCC super-set. Some people prefer Sass over Less because his control-structures syntax (selection, iteration) is more natural for most programmers, since is very similar to the one used in most imperative programming languages (C++, Java, etc) while Less uses a recursive approach, more similar to functional programming languages.

  • Absurd JS: The styles are described by writting pure JavaScript code, given that his notation for objects literals is very similar to the CSS notation. This interesting approach allows you to manipulate and preprocess the styles in any form you can imagine, since you are no longer limited by a small bunch of control structures like in the two above, but you can use the whole toolset of features provided by a programming language. I strongly recommend this options if you are a programmer, or if as a designer you are interested in learning how to code, or if you want to describe and reuse your style definitions in a non-trivial or crazy way you can't achieve with just a preprocessor.

I didn't know Stylus before reading this question. It seems to be pretty nice. I like his Python-like approach of use line breaks and tabulations to define the structure of the code. I will give it a try. If you already use this preprocessor and you don't find any important drawback, I would stick with it.

Upvotes: 0

Tomek Wyderka
Tomek Wyderka

Reputation: 1465

CSS-On-Diet is written in Python. You can install it easily by

pip install CSSOnDiet

It saves a lot of time and space, but syntax is different

Upvotes: 1

Linus Thiel
Linus Thiel

Reputation: 39223

Stylus' older siblings are LESS and Sass. I prefer Stylus to both, both because of features and speed, but they are pretty much interchangeable, AFAIK.

LESS is also written in javascript, and so will not release you from your node.js dependency. Sass is written in Ruby.

Upvotes: 4

Related Questions