Why I Started Working with Stylus CSS Preprocessor

For last few years I've been working with SASS. I was blindly related to this language after few tests with other CSS precompilators.

Few days ago I started creating project from zero and wanted to make research in this area. Firstly Ive started with SASS but...

The first issue which I had was differences between SASS and SCSS. I love indent based languages like PUG (previously JADE). Those languages are saving time and char numbers in code. But... lets get back to SASS so ... I wanted to have a basic objects which could be than iterated and could create final selectors with proper declarations.

In SASS:

$h1: ( font-size: 40px, font-family: Arial, weight: 100, color: black, text-decoration: none)

As you can see SASS needs this object to be in one line. In case when there would be used SCSS which could cause inconsistency when we will use in some files SASS and in some SCSS it could be multiline objects. But... I started checking if I could do it in some other way.

Stylus!

So using Stylus made my life easier:

$_btn_success = {
  font-family: Arial,
  font-size: 14px,
  font-weight: normal,
  color: white,
  background: blue,
  border-radius: 5px,
  padding: 5px 15px,
  display: inline-block
}

I can keep my object like this. Additionally I can use function for iterating this kind of object like this:

for key, value in hash
    {key}: value

So when I will create a function like:

CreatePropertiesFromHash(hash)
  for key, value in hash
    {key}: value</code>

I can use it to create full descriptions of selectors based on previously created object like:

$_btn_success = {
  font-family: Arial,
  font-size: 14px,
  font-weight: normal,
  color: white,
  background: blue,
  border-radius: 5px,
  padding: 5px 15px,
  display: inline-block
}

CreatePropertiesFromHash(hash)
  for key, value in hash
    {key}: value

.btn--success
  CreatePropertiesFromHash($_btn_success)

This code will be transformed to:

.btn--success {
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  color: white;
  background: blue;
  border-radius: 5px;
  padding: 5px 15px;
  display: inline-block;
}

Why I think that Stylus can improve my workflow?

Currently I've switched to this CSS precompilator because of it's simplicity. It can be as easy as SASS or even improved SASS. Of course my previous love to SASS will no rust but changes are showing us another point of view.

After next dose of Stylus I will share my thoughts with You as well!

Try Stylus on your own!