vue插件

一、引入sass

　　npm  install  node-sass  --save-dev

　　npm  install  sass-loader@^7.3.1  --save-dev

　　npm  install  style-loader  --save-dev  

　　使用：

　　　　在組件的style標籤中使用

　　　　　　<div>

　　　　　　　　<p  class="title">

　　　　　　　　　　<span  class="s1">s1</span>

　　　　　　　　　　<span  class="s2">s2</span>

　　　　　　　　</p>

　　　　　　</div>

　　　　　　<style  lang="scss">

　　　　　　　　$redColor：red；　　// 美圓符開頭表示定義變量，能夠在其餘地方使用

　　　　　　　　@mixin   aaaa{　　// 混合器使用@mixin標識符定義，經過@include  aaaa；來使用這個混合器

　　　　　　　　　　border：1px  solid  red；

　　　　　　　　　　border-radius：8px；

　　　　　　　　}

　　　　　　　　div{

　　　　　　　　　　border： 1px  solid  $redColor；

　　　　　　　　　　.title{　　// 嵌套使用

　　　　　　　　　　　　color：$redColor；

　　　　　　　　　　　　@include  aaaa；

　　　　　　　　　　　　&：hover{　　// &表示.title

　　　　　　　　　　　　　　color：blue

　　　　　　　　　　　　}

　　　　　　　　　　　　.s1，.s2{　　// 羣組選擇器

　　　　　　　　　　　　　　background：$redColor；

　　　　　　　　　　　　}

　　　　　　　　　　}

 

　　　　　　　　}

　　　　　　</style>