sass

sass，css预编译语言

按照以下方法配置ruby环境

http://blog.csdn.net/zhenhanhong_tony/article/details/52880867

安装sass $:sudo gem install -n /usr/local/bin sass

查看是否安装成功 $:sass -v

$:sass [文件路径/xx.scss]

编译并输出

$:sass [文件路径/xx.scss] [文件路径/xx.css]

基本用法：

$primaryColor:#333;
body{
color:primaryColor;
background:primaryColor;
}

//嵌套
nav{
ul{
list-style:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:6px 12px;
text-decoration:none;
}
}

//导入
@import 'reset';
h1{
color:#333;
}

//函数
@mixin box-sizing ($sizing){
-webkit-box-sizing:$sizing;
  -moz-box-sizing:$sizing;
  box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}

//扩展/继承
.message{
border:1px solid #ccc;
padding:10px;
color:#333;
}
.success{
@extend .message;
border-color:green;
}
.error{
@extend .message;
border-color:red;
}

//计算
.container{
width:100%;
}
article[role="main"]{
float:left;
width:600px / 960px * 100%;
}
aside[role="complimentary"]{
float:right;
width:300px /960px * 100%;
}

//颜色函数
$linkColor:#08c;
a{
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}