SASS学习记录

sassNote.scss

/**
 * SASS 学习记录
 * date: 2013-09-03
 * author: chengmu
 * Install: gem install sass
 * StartWatching: sass --watch style.scss:style.css
 * features:
 * 嵌套选择器/样式/伪类(`&`指向父元素)
 * $定义变量(可用于属性名)
 * 属性值运算 数值/[辅助函数](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html)
 * `@mixin` 定义样式模块供`@include`  可使用参数
 * `@import` 引入其他样式表 生成时直接引入
 */


//定义变量
$main-color:#333;
$style:solid;

$pos:left;

#nav{

    $navbar-width: 800px;
    $items: 5;
    $navbar-color: #ce4dd6;

    width:80%;

    //选择器层叠
    li{
        height:10px;
        width : $navbar-width/$items - 10px;  //支持数值运算
    }
    // 样式分块
    border:{
        left:{
            style:$style;
            color: green;
        }
        bottom:{
            style:dashed;
            color:azure;
        }
    }
    a{
        color:$main-color;
        //定义伪类样式
        &:hover{
            color:blue;
        }
        &:visited{
            //颜色辅助函数  lightness, hue, saturation, and more.
            color:lighten($main-color, 10%);
        }
        border-#{$pos}:{
            color:red;
        }
    }
}

@mixin rounded-top-left {
  $vert: top;
  $horz: left;
  $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; }

//带参数的
@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); }
#sidebar { @include rounded(top, left, 8px); }