compass作雪碧圖

因爲最近沒什麼時間好好寫博文，我把用sass作雪碧圖的關鍵點貼出來方便本身記憶:

config.rb註釋

# Set this to the root of your project when deployed:
#配置服務器路徑
http_path = "http//:www.baidu.com/"

#配置css sass images javascripts路徑
css_dir = "public/stylesheets"
sass_dir = "public/sass"    
images_dir = "public/images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
#根據我的偏好選擇輸出樣式 :nested嵌套  :compact緊密 :compressed壓縮
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
#相對路徑
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

sass寫法生產sprites:

@import "compass/utilities/sprites";    // 加載compass sprites模塊
$book-spacing:100px;                // 配置全部sprite間距爲100px，默認爲0px  此句要放在前面才生效
$book-position: 100px;                // 配置全部sprite的位置，默認爲0px
$book-base-class:"pfan";
$book-sprite-dimensions:true;       //自動給每一個html選擇器添加寬度width和高度height
//$book-layout:smart;                  //智能佈局的把每張圖像放在最合適的地方
//$book-layout:horizontal;                  //水平排列
$book-layout:vertical;                  //縱向排列
//$book-layout:diagonal;                  //對角線佈局，最浪費資源

@import "book/*.png";                    // 導入share目錄下全部png圖片
@include all-book-sprites();                // 輸出全部的雪碧圖css
//$<map>-<sprite>-spacing: 10px;        // 配置單個sprite間距爲10px，默認繼承$<map>-spacing的值
//$<map>-<sprite>-position: 0px;        // 配置單個sprite的位置，默認繼承$<map>-position的值

 

作雪碧圖有兩種方式：

　　第一種，簡單粗暴：

//導入雪碧圖  經過@import導進圖片，而後再經過@include合併成雪碧圖
//@import "normal/*.png";
//@include all-normal-sprites;

　　第二種，精細化，每一個去作：

//引進圖片合併給一個變量(後面會用到這個變量)
$sprites:sprite-map("leave/*.png");

　　作移動端記得要設置間距

$<map>-spacing:100px; 

　　

　　第一種方案，我就不作太多介紹了，說說第二種，來個例子

//引進圖片合併給一個變量(後面會用到這個變量)
$sprites:sprite-map("leave/*.png");

.test{
    display:block;
    background-repeat:no-repeat;
    background-image:sprite-url($sprites);//獲取整個雪碧圖路徑
    background-position:sprite-position($sprites,update); //獲取當個文件所移動的位置
    width:image-width(sprite-file($sprites,update)); //設置ico寬度高度
    height:image-height(sprite-file($sprites,update));
}

　　生成代碼：

.test {
  display: block;
  background-repeat: no-repeat;
  background-image: url('../images/leave-s1df1db3dd3.png');
  background-position: 0 -86px;
  width: 67px;
  height: 25px;
}

 

最後附上雪碧圖PC\WAP端引用的@mixin

//雪碧圖mixin引塊，由於目前編譯不過GIF，故暫用png8
$media:false;
@mixin iconItem($sprites,$name,$iE6:null){
    background-image:sprite-url($sprites) no-repeat;  //獲取整個雪碧圖路徑
    @if $iE6 != null{ //null
        _background-image:sprite-url($iE6) no-repeat; //此處傳進來的格式須是png8
    }
    $width:image-width(sprite-file($sprites,$name)); //sprite-file 獲取目標圖片
    $height:image-height(sprite-file($sprites,$name)) //獲取目標圖片
    @if $media{//wap
        height:ceil($height / 2);
        width:ceil($width / 2);
        
        //sprite-position 獲取目標圖的位置
        background-position: round(nth(sprite-position($sprites,$name),1)/2) 
                             round(nth(sprite-position($sprites,$name),2)/2);
        background-size:ceil($width / 2) auto;
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}

另外一個：

//compass 二倍圖轉rem
@mixin s2b($sprite, $name, $toRem:true) {
    $pos_x: floor(nth(sprite-position($sprite, $name), 1) / 2);
    $pos_y: floor(nth(sprite-position($sprite, $name), 2) / 2);
    $width: ceil(image-width(sprite-file($sprite, $name)) / 2);
    $height: ceil(image-height(sprite-file($sprite, $name)) / 2);
    $size_w: ceil(image-width(sprite-path($sprite)) / 2);
    $size_h: ceil(image-height(sprite-path($sprite)) / 2);
    @if $toRem {
        $pos_x: pxTorem($pos_x);
        $pos_y: pxTorem($pos_y);
        $width: pxTorem($width);
        $height: pxTorem($height);
        $size_w: pxTorem($size_w);
        $size_h: pxTorem($size_h);
    }
    background-image: $sprite;
    background-repeat: no-repeat;
    background-position: $pos_x $pos_y;
    background-size: $size_w $size_h;
    //background-size: $size_w auto;
    height: $height;
    width: $width;
}

 我本身的(這裏面有一點要注意雪碧地圖，加行間距要這樣$sprites:sprite-map("leave/*.png",$spacing:10px,$layout: vertical);列到裏面):

/*引進圖片合併給一個變量(後面會用到這個變量)*/
$sprites:sprite-map("leave/*.png",$spacing:10px,$layout: vertical);

/*轉換px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
    @if $px == 0{$px:0px}
    @return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
    @if $px == 0{$px:0px}
    @return $px / ($browser-default-font-size*2) * 1rem;
}

/*雪碧圖mixin引塊，pc和移動端由於目前編譯不過GIF，故暫用png8*/
$media:true;
@mixin iconItem($sprites,$name,$iE6:null){
    background:sprite-url($sprites) no-repeat;  //獲取整個雪碧圖路徑
    @if $iE6 != null{ //null
        _background:sprite-url($iE6) no-repeat; //此處傳進來的格式須是png8
    }
    $width:image-width(sprite-file($sprites,$name));  //sprite-file 獲取目標圖片
    $height:image-height(sprite-file($sprites,$name));  //獲取目標圖片
    $toalWidth:image-width(sprite-path($sprites));    //獲取整張圖的寬度
    $totalHeight:image-height(sprite-path($sprites));   //獲取整張圖的高度
    $widthHalf:ceil($width/2);                             //獲取寬度的一半
    $heightHalf:ceil($height/2);                        //獲取高度的一半
    //sprite-position 獲取目標圖的位置,nth操做數組
    $posX:round(nth(sprite-position($sprites,$name),1));  //獲取沿x軸的位移
    $posY:round(nth(sprite-position($sprites, $name), 2));  //獲取沿y軸的位移
    @if $media{//wap
        height:pxTorem($heightHalf);
        width:pxTorem($widthHalf);
        font:$posX;
        font:$posY;
        background-position: pxTo2rem($posX) pxTo2rem($posY);
        background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}
/*帶時間戳的圖片,pc和移動端 ,$imgUrl必須帶文件夾和文件名字符串,例"icon/pig.png"*/
@mixin  timestampImg($imgUrl){
    background:image-url($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}
/*base64位的圖片,pc和移動端 ,$imgUrl必須帶文件夾和文件名字符串,例"icon/pig.png"*/
@mixin  base64Img($imgUrl){
    background:inline-image($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}

 

compass製做雪碧圖參考資料:

　　使用compass自動合併css雪碧圖

　　使用Compass生成雪碧圖

　　sass技巧：compass製做「雪碧圖」  

　　【Sass中級】使用Sass和Compass製做雪碧圖