LearnBoost/stylus — Issue #544: Couple of Suggestions
Author: alixaxel
Created: 2012-01-30 16:09:31+00:00
State: open

I've tried both Sass and LESS and I'm settling on Stylus now.
While it's awesome in general, I feel there are a couple of things that could still be better IMO, namely:

## 1) Ability to Nest (Namespace) Mixins

```
.grid {
.offset(@i) {
left: 100% / @gridColumns * @i;
position: relative;
}
}

#nav { #grid > .offset(-8); }
#wrap { #grid > .offset(+8); }
```

That's what a typical namespaced mixin looks like in LESS - while the same end result can achieved in Stylus it adds much more pollution to the global scope and that doesn't add up to a neatly organized system. One other consequence of this is that libraries such as `nib` can't coexist with other user defined mixins or third-party vendors.

Tried doing the same in Stylus but no error is even thrown:

```
.grid
offset($i)
left: 100% / $gridColumns * $i;
position: relative;
```

This made me suspect that this was a supported feature, but I get a parse error as soon I write another line:

```
73| offset(i)
74| left: 100% / $gridColumns * i;
75| position: relative;
76|
> 77| #nav

expected "indent", got "eos"
```

## 2) s() - Specifiers and Paddings

The `s()` function would be much more useful if it had support for `%s`, `%u` and `%f` as well as padding specifiers.

## 3) Smarter Operand / Operator Calculations

I've come across this annoying issue a couple of times, take the following snippet for example:

```
.grid
width: 960px / 2;
```

The resulting output fails to output the desired result (480px), I'm not sure if this is because different UOMs are being used.

## 4) Can I nest too?

The ability to drop braces is quite cool, but sometimes it's not very useful, an example:

```
.grid
background-image:
linear-gradient(0deg, rgba(255, 255, 255, 0.75) ($gridGutter * 2), rgba(255, 0, 0, 0.25) ($gridGutter * 2), rgba(255, 0, 0, 0.25)),
linear-gradient(90deg, #eee 1px, transparent 1px, transparent);
background-position: ($gridGutter * -1) 0;
background-size: (100% / $gridColumns) 1.5em;
```

This produces a type error:

```
72| .grid
> 73| background-image:
74| linear-gradient(0deg, rgba(255, 255, 255, 0.75) ($gridGutter * 2), rgba(255, 0, 0, 0.25) ($gridGutter * 2), rgba(255, 0, 0, 0.25)),
75| linear-gradient(90deg, #eee 1px, transparent 1px, transparent);
76| background-position: ($gridGutter * -1) 0;

Cannot read property 'name' of undefined
```

Is it really necessary to drop readability in favor of the parser?

Anyway, this is just my two cents, otherwise Stylus is perfect. Keep up the good work!