sass & compass 实战录

一、sass 是什么

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

二、SASS的基本语法

变量
以$开头的变量，类似于php中变量的概念
```
$dark = #000;
a {color: $dark;} // a {color: #000}
```

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

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

ul {max- 1200px;margin: 0 auto;
        li {float: left; padding: 5px 15px;}
}

//等同于 

ul {max- 1200px;margin: 0 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: 0;*zoom: 1;}
     &: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,0.3s,ease-in);
 -moz-transition: color, 0.3s, ease-in; -o-transition: color, 0.3s, ease-in; -webkit-transition: color, 0.3s, ease-in; transition: color, 0.3s, ease-in;

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

@include opacity(0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;  //兼容了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: 0 0; }

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

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

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

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

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

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

.icons-weixin2 { background-position: 0 -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;  47px; }
.img .weibo { background-position: 0 -138px; height: 47px;  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);

  //根据名字获取获取长度和宽度，并设置
   image-width($imgurl) / 2;
  height: image-height($imgurl) / 2;



  //设置图标的位置
  background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
  //使用compass的Css3模块 兼容处理背景图片大小
  @include background-size(ceil(image-width(sprite-path($sprite-btn)) / 2) 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 {  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的一点小小经验，欢迎沟通交流