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.

Working on Hexo theme customization in past few days. And wish to borrow some concepts from Google’s Material Design.

The concept that I’m interested most in Material Design is the Dimensionality. It identify visual area on the page with Shadow.
By defining multiple shadow configuration, it creates layers in a 2-D space! Simple and efficient. What a graceful solution!

By referencing the Shadow Definition in the spec, I recreate the effect with plain CSS.

Clicking the div will shift the shadow depth.

Mobile Support

Test it on Mobile, and found the top-shadow is not displayed properly. The reason is that I used multiple-shadow to apply Top Shadow and Bottom Shadow to the same div. But according to Box-Shadow MDN Document, Multiple shadows is only supported by iOS Safari with -webkit- prefix. So it doesn’t work properly.

Polymer and Angular-Js official implementations

Before recreate it, I also checked the Polymer and Angular JS, and the result is disappointing. Ploymer version has better quality than Angular Js version, Angular JS one is still very buggy.

Even they’re functioning, either Polymer or Angular-JS is too intrusive or too heavy for simple page to use, such as blog. If you don’t really need these transition animations, to implement these basic effects, CSS3 should be enough.