sass基础

Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。
CSS预处理器(CSS Preprocessor)，是一种构架于css之上的高级语言，可以通过脚本编译生成CSS代码
SASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS
/ SASS允许使用变量，所有变量以$开头
$blue:#1875e7; div{ color:$blue; }
/ 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side:left; .rounded{ border-#{$side}-radius:5px; }
/ SASS允许在代码中使用算式

body{
    margin:(14px/2);
    top:50px+100px;
    right:$var*10%;
}

/ SASS允许选择器嵌套

div{
    h1{
    color:red;
    }
}

/ 在嵌套的代码块内，可以使用&引用父元素

a{
    &:hover{
        color:#ffb3ff;
    }
}

/ 属性也可以嵌套,注意，border后面必须加上冒号

p{
    border:{
        color:red;
    }
}

/ 注释

/ SASS共有两种注释风格。
/ 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
/ 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
/ 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/ SASS允许一个选择器，继承另一个选择器。

.class1{
     border:1px solid #ddd;
}
.class2{
    @extend .class1;
    font-size:120%;
}

/ Mixin是可以重用的代码块。
/ 使用@mixin命令，定义一个代码块。

@mixin left{
    float:left;
    margin-left:10px;
}

/ 使用@include命令，调用这个mixin。

div{
    @include left;
}

/ mixin可以指定参数和缺省值

@mixub left($value:10px){
    float:left;
    margin-right:$value;
}

/ 使用的时候，根据需要加入参数

div{
    @include:left(20px);
}

/ mixin的实例，用来生成浏览器前缀。

@mixin rounded($vert,$horz,$radius:10px){
    border-#{$vert}-#{$horz}-radius:$radius;
    -moz-border-radius-#{$vert}#{$horz}:$radius;
    -webkit-border-#{$vert}-#{$horz}-radius:$radius;
}

/ 使用的时候，可以像下面这样调用：

#navbar li{
    @include rounded(top,left);
}
#footer{
    @include rounded(top,left,5px);
}

/ SASS提供了一些内置的颜色函数，以便生成系列颜色

lighten(#cc3,10%)
darken(#cc3,10%)
grayscale(#cc3)
complement(#cc3)

/ @import命令，用来插入外部文件。

@import 'path/filename.css';

/ 如果插入的是.css文件，则等同于css的import命令。

@import 'foo.css';
/ @if可以用来判断：
p{
    @if 1+1==2{border:1px solid;}
    @if 5<3{border:2px dotted;}
}

/ 配套的还有@else命令

@if lightness($color)>30%{
    background-color:#000;
}@else{
    background-color:#fff;
}

/ 支持for循环：

@for $i from 1 to 10{
    .border-#{$i}{
        border:#($i)px solid blue;
    }
}

/ 支持while循环

$i:6;
@while $i>0{
    .item-#{$i} {
        width:2em*$i;
    }
    $i:$i-2;
}
/ each命令，作用与for类似：
@each $member in a,b,c,d{
    .#{$member}{
        background-image:url('/image/#{$member}.jpg');
    }
}

/ 允许用户编写自己的函数

@function double($n){
    @return $n*2;
}
#siderbar{
    width:double(5px);
}