compass用法初探

 阮一峰的Compass用法指南写的蛮好,我只是在此文章上面进行补充,地址:http://www.ruanyifeng.com/blog/2012/11/compass.html

1、&的用法代码如下:

a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }

    .sidebar & {
        color: blue;
    }
}

这里的&指的就是它的父级a编译之后就是这样的


a {
  text-decoration: none;
}
a:hover, .button, .button-red {
  text-decoration: underline;
}
.sidebar a {
  color: blue;
}

2、层次简写 代码如下:

.hero-unit {
    font: {
        family: Helvetica;
        size: 200%;
        weight: bold;
    }

    border: {
        right: 1em;
        bottom: 1em;
    }
}

编译之后就是这样:

.hero-unit {
  font-family: Helvetica;
  font-size: 200%;
  font-weight: bold;
  border-right: 1em;
  border-bottom: 1em;
}

在我看来就是结构清楚些。

3、样式的继承

.button {
    background-color: #ccc;
    display: inline-block;
    padding: 1em 1.5em;
    color: #fff;
    @extend a:hover;
}

.button-red {
    @extend .button;
    background-color: red;
}

通过extend继承已有的css样式编译之后是这样滴

.button, .button-red {
  background-color: #ccc;
  display: inline-block;
  padding: 1em 1.5em;
  color: #fff;
}

.button-red {
  background-color: red;
}

4、compass制作图片精灵

载入一些模块

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

配置文件里面设置images_dir = "images"然后把图片放到images里面通过@include all-icons-sprites;就可以生成这样滴效果

.icons-sprite, .icons-briefcase, .icons-car, .icons-marker, .icons-speakers, .custom-class {
  background: url('../images/icons-s86b01d1019.png') no-repeat;
}

.icons-briefcase {
  background-position: 0 -96px;
}

.icons-car {
  background-position: 0 -64px;
}

.icons-marker {
  background-position: 0 0;
}

.icons-speakers {
  background-position: 0 -32px;
}

briefcase,car,marker,speakers这些都是图片的名字。最后生成一整张图片名字叫做icons-s86b01d1019.png。

无标签
分享到: