vue安裝和使用scss及sass與scss的區別詳解

1. 安裝依賴：npm install node-sass sass-loader -D

2. webpack.base.conf.js文件

module: {
{ //手動添加這一條，相當于是編譯識別sass!
 test: /\.scss$/,
loaders: ["style", "css", "sass"]}

 }

3. 在.vue文件中使用

<style scoped lang="scss">
 .box{
 width: 100%; :hover{ color: red; }
 }
</style> 

下面看下sass與scss的區別

用了很久css預編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點尷尬，找了個教程擼了遍==。。

1.異同：簡言之可以理解scss是sass的一個升級版本，完全兼容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進表示嵌套關系，scss是花括號

//sass 太費眼了
.father
 width:100px;
 .son
 width:50px;
//scss 適合我這種眼瘸手殘患者
.father{
 width:100px;
 .son{
 width:50px;
 }
} 

2 .scss功能很強大的樣子，能做運算、寫函數啥的，但是我只是作為語法糖用而已，只看了些基礎功能

  我個人常用的功能有：

3.一個關于@mixin、@extend、%placeholder的適用場景總結

總結：

以上所述是小編給大家介紹的vue安裝和使用scss及sass與scss的區別詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com