title: vue 中使用 sass
Sass 是一款強(qiáng)化 CSS 的輔助工具毒费，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)改化、嵌套 (nested rules)鸠信、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能
安裝(mac下)以及使用
安裝
```
sudo cnpm install node-sass --save-dev
sudo cnpm install sass-loader --save-dev
```
使用
```
<style lang="scss" scoped> //scoped代表只在本頁(yè)應(yīng)用的樣式
</style>
```
功能
1. 嵌套
css允許將一套css樣式套進(jìn)另一套樣式中衣屏，內(nèi)層的樣式為外層樣式的子選擇器
（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 用 & 符號(hào)代表嵌套規(guī)則外層的父選擇器
scss樣式
```
a {
background: red;
&:hover {
text-decoration: underline;
}
}
```
編譯后的css樣式
```
a {
background: red;
}
a:hover {
text-decoration: underline;
}
```
（3）屬性嵌套
sass允許同一個(gè)屬性嵌套在命名空間中
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. 變量 $
變量支持塊級(jí)作用域施绎，嵌套內(nèi)定義的變量成為局部變量，只能在當(dāng)前嵌套內(nèi)使用骄蝇，在頂層定義的變量成為全局變量膳殷，可以在所用地方使用
- !global 可以將局部變量轉(zhuǎn)換為全局變量，用于結(jié)尾
scss樣式
```
div {
$width: 100px !global;
width: $width;
}
.container {
width: $width;
}
```
編譯后的css樣式
```
div {
width: 100px;
}
.container {
width: 100px;
}
```
- !default 默認(rèn)變量九火，不會(huì)重新賦值已經(jīng)賦值的變量赚窃，但是沒有賦值的變量會(huì)賦予值
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. 字符串
- 使用#{}時(shí)，有引號(hào)字符串將被編譯為無引號(hào)字符串岔激，這樣便于在勒极，，mixin中引用選擇器名
scss樣式
```
@mixin firefox-message($selector) {
body.content #{$selector}:before {
content: 'hi'
}
}
@include firefox-message('.header')
```
編譯后的css樣式
```
body.content .header:before{
content: 'hi'
}
```
4. 運(yùn)算
scss樣式
```
p {
font-size: 20px + 10px/2
}
```
編譯后的css樣式
```
p {
font-size: 25px;
}
```
5. 插值語句
通過#{} 插值語句可以在選擇器或?qū)傩悦惺褂米兞?/p>
scss樣式
```
$name: pig
$p: padding
p .$name {
$p-left: 20px;
}
```
編譯后的css樣式
```
p .pig{
padding-left: 20px;
}
```
6. extend繼承
@extend 的作用是將重復(fù)使用的樣式延伸給需要包含這個(gè)樣式的特殊樣式
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. 混合指令
混合指令用于定義可重復(fù)使用的樣式鹦倚，避免了使用無語意的 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）混合樣式帶參數(shù)
- 普通參數(shù)
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;
}
```
- 默認(rèn)參數(shù)
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;
}
```
- 參數(shù)變量
sass
```
@mixin args ($shadow...) {
box-shadow: $shadow...
}
p {
@include args(2px 3px 2px #000)
}
```
編譯后的css樣式
```
p {
box-shadow: 2px 3px 2px #000;
}
```
（4）在混合指令中導(dǎo)入內(nèi)容@content
scss樣式
```
@mixin name {
* html {
@content
}
}
@include name {
body {
background: red;
}
}
```
編譯后的css樣式
```
* html body {
background: red;
}
```
