Tricky Sass

Sass将css几乎变成了一个编程语言，虽然平时几乎用不到它编程语言的特性。但是了解一下还是十分有趣的。

---

1 这个是类似命名空间 text:

.btn { 
    text: {
       decoration: underline;
       transform :lowercase;
   }
}

这个scss会被编译成为

.btn{
   text-decoration: underline;
   text-transform :lowercase;
}

---

2

.sidebar{width: 100px;
      .user & {width: 100px;}
 }

就算在层叠里面，还是可以引用父元素
这样在做覆盖样式的时候就不需要特地额外的写一些class了

---

3

类似ruby的转义符号

$side: top;
sup {
   .post-#{$side} {color: green; }
}

---

4

需要注意的小地方:

.content {
   .call {}
   &.call {}
}

这两者会被编译成

.content .call {}
.content.call {}  //注意，这个没有空格，只有两个class同时在的时候才生效

有了Sass，你可以轻松写出让人想抽你的代码，所以掌握平衡很重要。