首页 > 代码库 > sass & compass 实战录

sass & compass 实战录

一、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;

     

 

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

 

sass & compass 实战录