SASS下CSS3属性无需再写厂商前缀

.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

一般来说，使用Compass的CSS3模块中的边框圆角混合器可以免去你这部分的重复工作。首先在你的Sass文件中引入CSS3模块，然后引入混合器：

@import “compass/css3″;
.rounded {
@include border-radius(5px);
}

看一下生成的CSS：

.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

这样做，不仅避免了重复输入-webkit和-moz，同时也支持了其他的一般常用的厂商命名空间，令你设计的网页可以在更多浏览器中保持良好设计。尽管这一点点重复看上去并不是那么恐怖，可如果你仅仅是想让第四个角是圆角呢？对此，火狐浏览器的开发者们并未就最好的实现方式与业界其他人士达成一致，而惯用的实现方式如下：

.rounded-one {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}

这个地方，Compass有更好的实现。你可以通过border-corner-radius混合器来指定单个边框圆角：

.rounded-one {
@include border-corner-radius(top, left, 5px);
}

生成的CSS如下，火狐的方式也包含在内：

.rounded-one {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-o-border-top-left-radius: 5px;
-ms-border-top-left-radius: 5px;
border-top-left-radius: 5px;
}

以上只是Compass中有关CSS3的冰山一角的一角的一角。第9章将更深入地接触所有能节省时间的特性。