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,你可以轻松写出让人想抽你的代码,所以掌握平衡很重要。

你可能感兴趣的:(Tricky Sass)