Sass extension 初探

今天一直在看sass and compass in action

这本书断断续续看了一遍，今天看第二遍， 一开始对sass不以为然，没觉得便捷多少，今天重看mixin 和 extension 扩展才发现强大之处

今天 分享一下  juice 这款 sass 扩展

https://github.com/kjbrum/juice

这款插件刚看了一会，就被一个 breakpoint 的 mixin 深深吸引

安装就不说了，github下载 bower都可以，import 路径写对就ok

下面来看一下效果

Available preset values: xxlarge, xlarge-only, xlarge-up, xlarge, large-only, large-up, large, medium-only, medium-up, medium, small-only, small-up, small, xsmall-only, xsmall-up, xsmall, xxsmall, iphone3, iphone3-landscape, iphone3-portrait, iphone4, iphone4-landscape, iphone4-portrait, iphone5, iphone5-landscape, iphone5-portrait, iphone6, iphone6-landscape, iphone6-portrait, iphone6-plus, iphone6-plus-landscape, iphone6-plus-portrait, ipad, ipad-landscape, ipad-portrait, ipad-retina, ipad-retina-landscape, ipad-retina-portrait, hdpi.

这里比较牛的就是这些 预设变量

现在用 iphone4-portrait 举例，乍一看，哇，这不是英文吗？ 如果是 ip4竖版的，那么执行如下的css代码

scss ：

$browser-prefixes:true !default;
@import "../bower_components/juice/dist/juice";
.element{
    @include bp(iphone4-portrait) {
        color:red;
    }
}

生成的 css为

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) and (orientation: portrait) {
  /* line 3, ../sass/juice.scss */
  .element {
    color: red;
  }
}
有没有很神奇，再也不用查 google了，再也不用 copy了，直接 一个 mixin搞定

生成图形也比较方便，比如三角形，这个我一直不是很明白css是如何画的，基本网上抄代码，现在直接mixin解决

scss：

.element { @include triangle(up-right, 50px, grey, true, before) { background-color: red; } }

css:

.element:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 0; border-color: transparent grey transparent transparent; position: absolute; top: 0; right: 0; background-color: red; }

再也不用思考当中的逻辑了有木有

再次感谢别人的辛勤劳动，希望可以找到更多有用mixin

喜欢juice的 breakpoint ，在此记录，以备后用