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>