title: vue 中使用 sass
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能
安装(mac下)以及使用
安装
```
sudo cnpm install node-sass --save-dev
sudo cnpm install sass-loader --save-dev
```
使用
```
```
功能
1. 嵌套
css允许将一套css样式套进另一套样式中，内层的样式为外层样式的子选择器
（1）普通嵌套
scss样式
```
body {
background: red;
div {
height: 30px;
a{
display: block;
}
}
}
```
编译后的css样式
```
body {
background: red;
}
body div {
height: 30px;
}
body div a{
display: block;
}
```
（2）父选择器
scss 用 & 符号代表嵌套规则外层的父选择器
scss样式
```
a {
background: red;
&:hover {
text-decoration: underline;
}
}
```
编译后的css样式
```
a {
background: red;
}
a:hover {
text-decoration: underline;
}
```
（3）属性嵌套
sass允许同一个属性嵌套在命名空间中
scss样式
```
a {
font {
size: 28px;
weight: bold;
}
}
```
编译后的css样式
```
a {
font-size: 28px;
font-weight: bold;
}
```
（4）@import嵌套样式
scss样式
```
.text {
color: red;
}
p {
@import 'text'
}
```
编译后的css样式
```
p .text{
color: red;
}
```
2. 变量 $
变量支持块级作用域，嵌套内定义的变量成为局部变量，只能在当前嵌套内使用，在顶层定义的变量成为全局变量，可以在所用地方使用
- !global 可以将局部变量转换为全局变量，用于结尾
scss样式
```
div {
$width: 100px !global;
width: $width;
}
.container {
width: $width;
}
```
编译后的css样式
```
div {
width: 100px;
}
.container {
width: 100px;
}
```
- !default 默认变量，不会重新赋值已经赋值的变量，但是没有赋值的变量会赋予值
scss样式
```
$content: 'a little pain'
$content: 'much pain' !default
$value: 'lover'
p:before {
content: $content
}
a:before{
content: $value
}
```
编译后css样式
```
p:before {
content: a little pain
}
a:before{
content: 'lover'
}
```
3. 字符串
- 使用#{}时，有引号字符串将被编译为无引号字符串，这样便于在，，mixin中引用选择器名
scss样式
```
@mixin firefox-message($selector) {
body.content #{$selector}:before {
content: 'hi'
}
}
@include firefox-message('.header')
```
编译后的css样式
```
body.content .header:before{
content: 'hi'
}
```
4. 运算
scss样式
```
p {
font-size: 20px + 10px/2
}
```
编译后的css样式
```
p {
font-size: 25px;
}
```
5. 插值语句
通过#{} 插值语句可以在选择器或属性名中使用变量
scss样式
```
$name: pig
$p: padding
p .$name {
$p-left: 20px;
}
```
编译后的css样式
```
p .pig{
padding-left: 20px;
}
```
6. extend继承
@extend 的作用是将重复使用的样式延伸给需要包含这个样式的特殊样式
scss样式
```
$p: padding
p {
$p-left: 20px;
}
div{
@extend p
border: 1px solid #aaa;
}
```
编译后的css样式
```
p , div {
padding-left: 20px;
}
div{
border: 1px solid #aaa;
}
```
7. 控制指令
（1）@if
scss样式
```
p {
@if 1 + 1 == 2 {
border: 1px solid #aaa;
}
}
```
编译后的css样式
```
p {
border: 1px solid #aaa;
}
```
（2）@for
scss样式
```
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
```
编译后的css样式
```
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
```
（3）@each
scss样式
```
@each $header, $value in (h1: red, h2: blue) {
$header {
color: $value
}
}
```
编译后的css样式
```
h1 {
color: red;
}
h2 {
width: blue;
}
```
8. 混合指令
混合指令用于定义可重复使用的样式，避免了使用无语意的 class
（1）定义混合样式@mixin
scss样式
```
@mixin font-value {
font {
size: 12px;
weight: bold;
}
color: #fff;
}
```
（2）引用混合样式@include
scss样式
```
p {
@include font-value
background: red;
}
```
编译后的css样式
```
p {
font-size: 12px;
font-weight: bold;
color: #fff;
background: red;
}
```
（3）混合样式带参数
- 普通参数
sass
```
@mixin args ($color) {
font {
size: 12px;
weight: bold;
}
color: $color
}
p {
@include args(#fff)
background: red;
}
```
编译后的css样式
```
p {
font-size: 12px;
font-weight: bold;
color: #fff;
background: red;
}
```
- 默认参数
sass
```
@mixin args ($color, $value: 12px) {
font {
size: $value;
weight: bold;
}
color: $color
}
p {
@include args(#fff, 13px)
}
a {
@include args(red)
}
```
编译后的css样式
```
p {
font-size: 13px;
font-weight: bold;
color: #fff;
}
a {
font-size: 12px;
font-weight: bold;
color: red;
}
```
- 参数变量
sass
```
@mixin args ($shadow...) {
box-shadow: $shadow...
}
p {
@include args(2px 3px 2px #000)
}
```
编译后的css样式
```
p {
box-shadow: 2px 3px 2px #000;
}
```
（4）在混合指令中导入内容@content
scss样式
```
@mixin name {
* html {
@content
}
}
@include name {
body {
background: red;
}
}
```
编译后的css样式
```
* html body {
background: red;
}
```