sass & compass 實戰錄

1、sass 是什麼

• Css的一種預處理器
• 是基於css進行語法擴展而成
• 主要目的是爲了提升開發效率，彌補css語法不足的缺陷
• 一樣流行的預處理器還有：less、stylus

2、SASS的基本語法

1. 變量

   以$開頭的變量，相似於php中變量的概念

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

2. 嵌套（包括選擇器的嵌套）

   嵌套是對css花括號語法的擴展，使得寫css就像寫dom同樣層級分明。

   ul {max-width: 1200px;margin: 0 auto;
           li {float: left; padding: 5px 15px;}
   }
   
   //等同於 
   
   ul {max-width: 1200px;margin: 0 auto;}
   ul li {float: left; padding: 5px 15px;}

    

    

    

3. @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;} //這樣就能引用清除浮動的代碼塊了

    

4. @extend 繼承

   這個更加好理解，就是將當前選擇器添加到繼承的選擇器那裏

   ul.nav {@extend .clearfix;}
   
   //生成的代碼
   ul.nav,.cliearfix {
   　　//代碼片斷
   }

    

3、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

 

4、 compass 的圖片精靈

　　這個真的很好用，很好用，很好用，很好用！！！！！

1. 在沒有compass以前，作圖片精靈的三步驟：

1. 將小icon用ps等相關工具合成一張圖片
2. 在瀏覽器慢慢調試background-position
3. 在瀏覽器慢慢調試width、height

不要看只有三步，這裏面的每一步都是至關耗時間的吶！！！

2. 使用compass的圖片精靈功能sprites

使用圖片精靈有下面多種方法，下面以icons這個圖片精靈文件夾爲例，下面示例代碼中使用到的icons 均是指圖片精靈文件夾名字

1. 使用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; }

    

2. 使用@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; }

3. 使用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) / 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 { 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; }
   
   

4. 配置圖片精靈選項，配置選項是一個變量，因此要在@import 以前使用，參考第二點使用
   

   //配置間距
   $icons-spacing: 5px;
   
   //配置重複性
   $icons-repeat: no-repeat;
   //配置尺寸
   $icons-sprite-dimensions:true;

    

 5、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的一點小小經驗，歡迎溝通交流