SASS入门

变量

sass中可以定义变量，方面统一修改和维护

$primaryColor:#222;

body{
color:$primaryColor
}

嵌套

sass可以进行选择器嵌套，表示层级关系，看起来很优雅整齐。

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

导入

sass中导入其他sass文件，最后编译一个css文件，优于纯css的@import

html,
body,
ui,
ol{
margin:0;
padding:0;
}

@import 'reset';
body{
font-size: 100%;
background-color:#efefef;
}

mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用，从此处理css3的前缀兼容轻松便捷。

@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);
}

扩展/继承

sass可以通过@extend来实现代码组合声明，使代码更加优越简洁。

.message{
border:1px solid #ccc;
padding:10px;
color:#333;
}
.success{
@extend.message;
border-color:green;
}

运算

sass 可进行简单的加减乘除运算等

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

颜色

sass中集成了大量的颜色函数,让变换颜色更加简单

$linkColor:#08c;
a{
text-decoration:none;
color:$linkColor;
$:hover{
color:darken($linkColor,10%);
}
}