假設(shè)你已經(jīng)用vue-cli初始化好了一個vue項目蔫巩，并成功運行出默認(rèn)的歡迎頁面：
TIM截圖20181122141126.png
然后安裝 node-sass和sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
如果出現(xiàn)錯誤，可以嘗試使用淘寶鏡像安裝解決：
npm install -g cnpm --registry=https://registry.npm.taobao.org （安裝淘寶鏡像）
然后使用cnpm 代替npm 安裝node-sass和sass-loader。
安裝好之后就可以在你的.vue文件中使用了：
首先在<style>標(biāo)簽中加入scss:
<style lang="scss"></style>
下面列舉一些比較常用的東西：
假設(shè)模板如下：
<template>
<div id="app">
<img src="./assets/logo.png">
<p>hello</p>
<div class="test1"></div>
<div class="test2"></div>
</div>
</template>
1陌知、變量
用$定義變量
$app-background: #d00;
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
background:$app-background; //可以直接引用
}
假如你的變量定義在了一個scss文件中呻引，用import引入即可
@import './style/variables'
2、@mixin混合器
@mixin divStyle($backgroundColor: #0d0) {
position: relative;
margin:0 auto;
width: 100px;
height:100px;
background:$backgroundColor;
}
.test1{
@include divStyle()
}
用@include引用祸憋，有默認(rèn)值時可以不傳值会宪；
編譯為：
.test1 {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
background: #0d0;
}
3、@extend繼承
.test1 {
border: 1px solid #333;
}
.test2 {
@extend .test1;
background-color: #999;
}
//編譯后
.test1, test2 {
border: 1px solid #333;
}
.test2 {
background-color: #999;
}
4蚯窥、屬性嵌套也時必用的啊掸鹅，可以這樣寫：
#app {
img{
width: 200px;
}
}
//編譯為
#app img {
width: 200px;
}
如果你想要在嵌套的選擇器里邊應(yīng)用一個類似于：hover的偽類塞帐，就需要用到 & 這個連接父選擇器的標(biāo)識符。
#app {
p{
font-size: 16px;
&:hover {
color: #999;
}
}
}
//編譯后：
#app p {font-size: 16px; }
#app p:hover { color: #999; }
