Stylus is an awesome CSS pre-processor, which provides much more concise syntax and more powerful feature than its competitors, such as LESS or SCSS.

But now, with more and more features added into Stylus, it seems its syntax become over-weighted. Pitfall come up.

I wish to declare an array of values for box-shadow property. And I can reference them with index:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

drop-shadows = [
  0 2px 10px 0 rgba(0, 0, 0, 0.16),
  0 6px 20px 0 rgba(0, 0, 0, 0.19),
  0 17px 50px 0 rgba(0, 0, 0, 0.19),
  0 25px 55px 0 rgba(0, 0, 0, 0.21),
  0 40px 77px 0 rgba(0, 0, 0, 0.22)
]
drop-shadow(n)
  box-shadow shadows[n]
for i in (1..5)  
  .drop-shadow-{i}
    drop-shadow(i)

And expect it generates

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.drop-shadow-1 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}  
.drop-shadow-2 {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}  
.drop-shadow-3 {
  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}  
.drop-shadow-4 {
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}  
.drop-shadow-5 {
  box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22;
}

But I found there is not such thing called Array in Stylus!!!!
There is only Hash, and Hash doesn’t accept number as key!
So finally, I come up something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

drop-shadows = {
  '1': 0 2px 10px 0 rgba(0, 0, 0, 0.16),
  '2': 0 6px 20px 0 rgba(0, 0, 0, 0.19),
  '3': 0 17px 50px 0 rgba(0, 0, 0, 0.19),
  '4': 0 25px 55px 0 rgba(0, 0, 0, 0.21),
  '5': 0 40px 77px 0 rgba(0, 0, 0, 0.22)
}
drop-shadow(n)
  box-shadow shadows[n+'']
for i in (1..5)  
  .drop-shadow-{i}
    drop-shadow(i)

In this piece of code, there are a bunch of pitfalls:

1. Hash doesn’t accept number as key. So 1: 0 2px 10px 0 rgba(0, 0, 0, 0.16) cause compile error.
2. '1' != 1, so drop-shadows[1] returns null
3. There is no type conversion function in Stylus, use the same trick as JavaScript. ''+n convert n into string.

Just found Stylus provides something called List, which is pretty much similar to what array in other languages, except the syntax.

1
2
3
4
5
6
7
8
9
10
11
12
13

drop-shadows = 0 2px 10px 0 rgba(0, 0, 0, 0.16),
               0 6px 20px 0 rgba(0, 0, 0, 0.19),
               0 17px 50px 0 rgba(0, 0, 0, 0.19),
               0 25px 55px 0 rgba(0, 0, 0, 0.21),
               0 40px 77px 0 rgba(0, 0, 0, 0.22)
drop-shadow(n)
  box-shadow shadows[n]
for i in (1..5)  
  .drop-shadow-{i}
    drop-shadow(i)

So no brackets or parentesis needed.

The Arduino IDE 1.5.3 introduced some new features, such as support latest board Yun, or introduces new libraries and samples. But I found it is too buggy to use.

1. Compile code against Arduino Nano fails due to parameter mcu passed to avrdude is missing.

Reason:
The issue seems caused because the new IDE merged the menu items for Nano board. But for some reason, the configuration haven’t been updated accordingly.

Workaround:
Choose Arduino Duemilanove and Diecimila instead of Arduino Nano. Nano uses same chip as Duemilanove(ATmega328) and Diecimila(ATmega168), but uses a different PCB design. So the binary should be compatible.

2. Compile String(100, DEC) throws ambiguous matching error

Reason:
The issue is caused because the API signature updated to String(*, unsigned char), but constants are still declared as int.

Workaround:
Add force cast DEC, HEX, BIN to byte instead of int.