Compass的CSS3模塊

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

<div class="content"></div>
<div class="box">Web前端</div>

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);
)