写的一个Sass 和Compass的例子

/*1、打开项目根目录下的 config.rb 文件
2、搜索 line_comments 关键词，默认应该是 # line_comments = false
3、去掉前面的 #，保存 config.rb
4、重新执行 compass compile*/
/*请注意空格
    $i:$i-1 和  $i: $i -1 与 $i:$i - 1  三个结果不同
*/


/*定义变量 并使用!default*/
$fontSize: 13px;
$fontSize: 18px !default;


/*嵌套Ul*/
ul {
    color: #fff;

    li, div {
        color: #000;
    }

    pre {
        color: #333;
    }
}

/*使用父集选择符 并使用变量*/
#main a {
    color: #fff;
    font-size: $fontSize;

    &:hover {
        color: #555;
    }
}

/*定义混编*/
@mixin MegaMenu($active) {
    body .megaMenu#{$active} {
        color: $fontSize;
    }
}
/*使用混编*/
@include MegaMenu(".active");

/*定义方法*/
@function calcWidth($width) {
    @return ($width*10 - 1);
}
/*使用方法*/
.calcWidth {
    width: calcWidth(10)px;
}


/*局部变量和全局变量同名  fontSize:14*/
p {
    $fontSize: 14px;
    width: $fontSize*10;
}
/*fontsize 原生*/
.Myspan {
    width: $fontSize*10;
}

/*import 的使用*/
@import "extend/_print.scss";

#mainSpan {
    @import "extend/_print";
    border: 1px;
}

/*extend  使用*/
#main {
    @extend .Myspan;
    border: 1px;
}

/*media 使用*/
header {
    @media(min-width:900px) {
        height: 300px;
    }
    @media(min-width:1200px) {
        height: 400px;
    }
}


/*For each while 使用*/
@each $i in megu,mega,gggg {

    @for $ii from 1 through 3 {
        .Item-#{$i} {
            width: (100*$ii)px;
        }
    }
}

$i: 6;

@while $i>0 {
    .while-#{$i} {
        height: $i px;
    }

    $i: $i - 1;
}

$isOk: 1;

@if($isOk==2) {
    @warn "没有后续了"
}


@import "compass/reset";
@import "compass/css3";


.rounded {
    @include border-radius(5px);
}

#opacity {
    @include opacity(0.5);
}

　 #inline-block {
    @include inline-block;
}

@import "compass/layout";

/*指定页面的footer部分总是出现在浏览器最底端：*/
　 #footer {
    @include sticky-footer(54px);
}
/*指定子元素占满父元素的空间：*/
#stretch-full {
    @include stretch;
}

@import "compass/typography";

/*指定链接颜色的mixin为*/


/*link-colors($normal, $hover, $active, $visited, $focus)*/
a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

@import "compass/utilities";
/*清除浮动：*/
.clearfix {
    @include clearfix;
}

　table {
    @include table-scaffolding;
}

/*暂时无法使用*/
/*@import "compass";

　　 .icon {
    background-image: inline-image("logo.png");
}*/

@debug "执行完成";