sass变量声明 ：
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
变量引用：
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
嵌套
//sass style
//-----------------------------------
nav {
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:6px 12px;
text-decoration:none;
}
}
导入
//sass style
//-----------------------------------
//reset.scss
html,
body,
ul,
ol{
margin:0;
padding:0;
}
//base.scss
@import 'reset';
body{
font-size:100% Helvetica,sans-serif;
background:#efefef;
}
扩展/继承
//sass style
//-----------------------------------
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color:yellow;
}
运算
//sass style
//-----------------------------------
.container {width: 100%;}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
颜色
//sass style
//-----------------------------------
$linkColor: #08c;
a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}