1. 浏览器前缀

$experimental-support-for-xxx

@import "compass/css3";$experimental-support-for-opera: false;$experimental-support-for-microsoft: false;$experimental-support-for-khtml: false;

2. 圆角

border-radius()混合器

3. 阴影

text-shadow混合器

box-shadow混合器

index.html

    
    
     Web前端
    

main.scss

@import "compass/css3";.content {    @include text-shadow (        rgba(#000, 5) -200px 0 0,        rgba(#000, 4) -400px 0 0,        rgba(#000, 3) -600px 0 0,        rgba(#000, 2) -800px 0 0    );    font-size: 2em;    font-style: italic;    text-align: right;}.box {    @include border-radius(100px);    @include box-shadow (        #a00 0 0 0 25px,        #785 0 -50px 0,        #222 50px -0px 0,        #440 0 50px 0,        #831 -50px 0 0    );    background: #999;    color: #fff;    height: 50px;    margin: 100px auto;    padding: 40px;    text-align: center;    width: 50px;}

效果图

4. 颜色渐变

@include background(linear-gradient(to-direction, first-color first-color-stop, second-color sencond-color-stop))

5. @font-face嵌入字体

@import "compass";@include font-face("xxx(字体命)",    font-files("xxx.woff", woff,               "xxx.ttf"， ttf,               "xxx.svg", svg,               "xxx.eot", normal, normal);)