sass / compass 使用笔记

参考网站：http://compass-style.org

                    http://www.w3cplus.com/preprocessor/compass-image-sprite.html

1   box-shadow

@import "compass/css3";

@include box-shadow(#ddd 5px 5px 10px);

2  border-radius

  @import "compass/css3";


  @include border-top-left-radius(25px);

  @includeborder-top-right-radius(25px);

  @includeborder-top-right-radius(25px);

  @includeborder-bottom-left-radius(25px);

  @includeborder-bottom-right-radius(25px);

  @includeborder-left-radius(25px);

  @includeborder-right-radius(25px);

  @include border-corner-radius( top , left , 40px );

   @include border-corner-radius( top , right , 5px );

   @include border-corner-radius( bottom , left , 15px );

   @include border-corner-radius( bottom , right , 30px );

3  生产雪碧图

@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;

注： my-icons是图片所在文件夹

雪碧图的其它用法

可以用@include <map>-sprite(image-name)语法将背景图中的某一个对应的位置图片传给指定的选择器;

可以使用 <map>-sprite-height(image-name)或者<map>-sprite-width(image-name)函数来获取到图片的宽和高