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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、什么是CSS预处理器,什么是Sass **(1) **CSS 预处理器用一种专门的编程语言,进行 Web 页面...
    ConRon阅读 217评论 0 0
  • Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,让 CSS ...
    於風聽語阅读 5,345评论 6 10
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 1,739评论 2 10
  • Sass的基本介绍: 1、sass是css的一个预编译处理器。增加了规则、变量、混入、选择器、继承等等特性。它是用...
    xcxerxes阅读 973评论 0 2
  • 因为要搬家,也因为果果选择了新教育,意味着放弃艺术教育,所以我们决定把家里的钢琴处理掉。昨天再次把钢琴触摸了一翻,...
    刘昱郡阅读 115评论 0 1