sass & compass 实战录

一、sass 是什么

Css的一种预处理器
是基于css进行语法扩展而成
主要目的是为了提高开发效率，弥补css语法不足的缺陷
同样流行的预处理器还有：less、stylus

二、SASS的基本语法

变量

以$开头的变量，类似于php中变量的概念
```
$dark = #;

a {color: $dark;} // a {color: #000}
```

嵌套（包括选择器的嵌套）

嵌套是对css花括号语法的扩展，使得写css就像写dom一样层级分明。

ul {max-width: 1200px;margin:  auto;

        li {float: left; padding: 5px 15px;}

}

//等同于 

ul {max-width: 1200px;margin:  auto;}

ul li {float: left; padding: 5px 15px;}

@mixin 混合器

就是一个代码作用域主要是用来封装那些常用的代码块，compass就包含了很多我们常用的@mixin

//语法

@mixin $name {

　　//代码片段

}

.class {@include $name;}

//实例

@mixin clearfix {

    &:before,&:after {

            content:"";display:table;

            line-height: ;*zoom: ;}

     &:after {clear: both;}

}

//引用

.clearfix {@include clearfix;} //这样就能引用清除浮动的代码块了

@extend 继承

这个更加好理解，就是将当前选择器添加到继承的选择器那里

ul.nav {@extend .clearfix;}

//生成的代码

ul.nav,.cliearfix {

　　//代码片段

}

三、compass，scss中的jQuery

　　为什么要用compass呢？

大量封装好的@mixin，例如：float、clearfix、horizontal-list等等
自动补全前缀的css3属性
Css图片精灵

大量的@mixin 这个真的很好用，特别是那些需要些浏览器前缀去hack的样式，真的是大大节约了不少时间呢！！！！

//下面是三个@mixin 是我项目中经常用到的，下面有对应编译生成的css

@include transition(color,.3s,ease-in);

 -moz-transition: color, .3s, ease-in; -o-transition: color, .3s, ease-in; -webkit-transition: color, .3s, ease-in; transition: color, .3s, ease-in;

@include translateY(-5px);

 -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); 

@include opacity();

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=); opacity: ;  //兼容了IE

四、 compass 的图片精灵

　　这个真的很好用，很好用，很好用，很好用！！！！！

1. 在没有compass之前，做图片精灵的三步骤：

将小icon用ps等相关工具合成一张图片
在浏览器慢慢调试background-position
在浏览器慢慢调试width、height

不要看只有三步，这里面的每一步都是相当耗时间的呐！！！

2. 使用compass的图片精灵功能sprites

使用图片精灵有下面多种方法，下面以icons这个图片精灵文件夹为例，下面示例代码中使用到的icons 均是指图片精灵文件夹名字

使用all-$dir-sprites , 这种方法最简单，不管你用没用到精灵的样式，反正一次性生成所有图片精灵，所以生成的代码相对也最冗余

@import "icons/*.png";

@include all-icons-sprites;

//生成

//生成的图片精灵的class name 都是以“图片文件夹-图片名”的方式命名，并且有一个主要的class name "图片文件夹-sprite"

.icons-sprite, .icons-msg, .icons-qq, .icons-qq2, .icons-tell, .icons-weibo, .icons-weibo2, .icons-weixin, .icons-weixin2 { background-image: url('img/icons-s980cae6d97.png'); background-repeat: no-repeat; }

.icons-msg { background-position:  ; }

.icons-qq { background-position:  -21px; }

.icons-qq2 { background-position:  -68px; }

.icons-tell { background-position:  -115px; }

.icons-weibo { background-position:  -138px; }

.icons-weibo2 { background-position:  -185px; }

.icons-weixin { background-position:  -232px; }

.icons-weixin2 { background-position:  -279px; }

使用@import "icons/*.png";与 icons-sprite 配合使用按需生成样式

$icons-sprite-dimensions:true;
@import "icons/*.png";

.img {

  .qq{@include icons-sprite(qq);}

  .weibo{@include icons-sprite(weibo);}

}

//生成 
//如果仅仅调用@import "icons/*.png" ，是不会生成任何代码的，调用了icons-sprite 才会生成代码，相对第一种方法，比较简洁

.icons-sprite, .img .qq, .img .weibo { background-image: url('img/icons-s980cae6d97.png'); background-repeat: no-repeat; }

.img .qq { background-position: 0 -21px; height: 47px; width: 47px; }
.img .weibo { background-position: 0 -138px; height: 47px; width: 47px; }

使用sprite-map ，这种方法最智能最灵活，可以生成二倍图

$sprite-icon: sprite-map("icons/*.png", $spacing: 5px, $layout: smart,$sort-by: '!width',$position:10px,$repeat:no-repeat);

@mixin radio2-sprite($sprite-btn,$name) {

  //获取当前图标的图片名字

  $imgurl: sprite-file($sprite-btn, $name);

  //获取当前图标的位置

  $pos: sprite-position($sprite-btn, $name);

  //根据名字获取获取长度和宽度，并设置

  width: image-width($imgurl) / ;

  height: image-height($imgurl) / ;

  //设置图标的位置

  background-position: nth($pos, ) /  nth($pos, ) / ;

  //使用compass的Css3模块 兼容处理背景图片大小

  @include background-size(ceil(image-width(sprite-path($sprite-btn)) / ) auto);

}

//引用

.icon {background-image: sprite-url($sprite-icon);}

.qq {@include radio2-sprite($sprite-icon,qq)}

//生成
// 可以与上面生成的css对比，尺寸的确是缩小了一般，哈哈^^
.icon { background-image: url('img/icons-s13e30d3d8d.png'); }
.qq { width: 23.5px; height: 23.5px; background-position: 0 -69px; -moz-background-size: 24px auto; -o-background-size: 24px auto; -webkit-background-size: 24px auto; background-size: 24px auto; }

配置图片精灵选项，配置选项是一个变量，所以要在@import 之前使用，参考第二点使用

//配置间距

$icons-spacing: 5px;

//配置重复性

$icons-repeat: no-repeat;

//配置尺寸

$icons-sprite-dimensions:true;

五、webpack配置compass

因为compass一半属于sass一半属于ruby，所以要用ruby-sass-loader才行

module.exports = { // ... 
module:{

        rules:{

              {

                test:/\.scss$/,

                 use: ExtractTextPlugin.extract({

                     use:"css-loader!ruby-sass-loader?compass=1"

                 })

            }

        ]

    },plugins:[

        new ExtractTextPlugin('./css/common.css')//方法二 第二步*

    ]
}

NB！ compass已经不再更新维护 https://github.com/Compass/compass/commit/dd74a1cfef478a896d03152b2c2a3b93839d168e

结语：好啦以上总结是我使用compass的一点小小经验，欢迎沟通交流