Sass|Compass入门 快速写css http://blog.163.com/shining0402@126/blog/static/16739148820119243125868/

     

     

Sass|Compass入门 快速写css  

     

                            2011-10-24 15:39:25|  分类：           web           |  标签：sass  compass  css  css框架                   |字号 订阅      

   

     

       

       

               

       

       

1.SASS 1)嵌套： #top{        width:200px;        height:200px;       p{             line-height:23px;             font-size:16px;       } } 2)参照： #top a{       color:red;       &:hover{              color:green;       } } 通过&来引用上一级中的a标记 3）属性： #top{        width:200px;        height:200px;       p{             line-height:23px;             font:{                    size:16px;                    weight:normal;             }       } } 生成的样式中是font-size和font-weight属性 4).变量 $color:red; a{      font-size:14px;      color:$color; } 5)if逻辑 $color:red; a{    @if $color == red{           font-size:12px;     } @else if $color == green{           font-size:14px;    } @else{           font-size:16px;     } } 6)Mixins

@mixin rounded-top {   $side: top;   $radius: 10px;    border-#{$side}-radius: $radius;   -moz-border-radius-#{$side}: $radius;   -webkit-border-#{$side}-radius: $radius; }  #navbar li { @include rounded-top; } /* 函数名为rounded-top */

7)Arguments

@mixin rounded($side, $radius: 10px) {   border-#{$side}-radius: $radius;   -moz-border-radius-#{$side}: $radius;   -webkit-border-#{$side}-radius: $radius; }  #navbar li { @include rounded(top); } /* 参数为top，radius的默认值为10px */

8).import

@import "rounded"; 导入_rounded.scss

2.COMPASS 1.设置compass 在config.rb配置文件中设定 1).line_comments = false;则不会出现类似/*line 3,../src/css/a.css */这样的注释 2).output_style设定输出样式有三种，:expanded（每个选择器里的单个样式为一行，呈现块状）    :nested(有父子关系的选择器将嵌套显示)     :compact(一个选择器里的样式将显示在一行) 3).设置相对路径：images_dir="src/images"                              relative_assets = true则样式中直接写images目录下图片，生成的css样式为相对路径，若设为false，则为绝对路径