SCSS

一、使用变量

• 变量声明、变量引用

$highlight-color: #f90

.selected{
    border: 1px solid $highlight-color;
}
// 编译后
/* .selected{
    border: 1px solid #f90;
} */

• 变量名用中划线或下划线分隔皆可。

　　　　即$highlight-color和$highlight_color皆可。变量声明中用中划线，变量引用中用下划线也可以如常引用。

二、嵌套CSS规则

SCSS写法：（像俄罗斯套娃一样，层层嵌套）

#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 }

• 父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

• 群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

编译后：

.container h1, .container h2, .container h3 { margin-bottom: .8em }

• 子选择器和同层组合选择器：>、+和~

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 }

• 属性嵌套

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

这比下边这种同等样式的写法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

三、导入SASS文件

使用@import规则导入，如：@import “colors”   (colors.scss的.scss后缀可以省略)

• 使用SASS部分文件：你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import"themes/night-sky";
• 默认变量值：一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
• 嵌套导入：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}