$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;
}
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
编译后：
.selected {
border: 1px solid #F90;
}
用下划线（_）或中划线（-，更为普遍）均可。
$link-color: blue;
a {
color: $link_color;
}
编译后：
a {
color: blue;
}
大多数情况下两种写法可互相兼容、互相引用。
纯 CSS 部分不互通，如类名、ID、属性名。
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
编译后：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#content {
background-color: #f5f5f5;
aside { background-color: #eee }
}
编译后：
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }
article a {
color: blue;
&:hover { color: red }
}
编译后：
article a { color: blue }
article a:hover { color: red }
可以用于伪类、特殊的嵌套选择器。
#content aside {
color: red;
body.ie & { color: green }
}
编译后：
#content aside {color: red};
body.ie #content aside { color: green }
.container {
h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
a {color: blue}
}
编译后：
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav a, aside a {color: blue}
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
编译后：
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
编译后：
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
>article > section { border: 1px solid #ccc }
+header + p { font-size: 1.1em }
~article ~ article { border-top: 1px dashed #ccc }
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
编译后：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
@import "sidebar";
当扩展名为 .sass 或 .scss 时，可省略扩展名。