sass & compass 实战录

Posted 2020-09-16 兵之诡道者

sass & compass 实战，使用经验总结,包括图片精灵和webpack配置

一、sass 是什么

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

二、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 {
   　　//代码片段
   }

    

三、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之前，做图片精灵的三步骤：

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;

    

 五、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的一点小小经验，欢迎沟通交流