vue安裝和使用scss及sass與scss的區(qū)別詳解
更新時間：2018年10月15日 09:57:00 作者：一勺豆
這篇文章主要介紹了vue安裝和使用教程，用了很久css預編譯器，但是一直不太清楚到底用的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的區(qū)別
用了很久css預編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點尷尬，找了個教程擼了遍==。。。
1.異同：簡言之可以理解scss是sass的一個升級版本，完全兼容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進表示嵌套關(guān)系，scss是花括號
//sass 太費眼了
.father
width:100px;
.son
width:50px;
//scss 適合我這種眼瘸手殘患者
.father{
width:100px;
.son{
width:50px;
}
}
2 .scss功能很強大的樣子，能做運算、寫函數(shù)啥的，但是我只是作為語法糖用而已，只看了些基礎(chǔ)功能
我個人常用的功能有：
- 嵌套
- 變量 $color : #111111;
- 混入 @mixin
- 繼承 @extend
3.一個關(guān)于@mixin、@extend、%placeholder的適用場景總結(jié)
- mixin 可以傳變量
- extend 不可以傳變量，相同樣式直接繼承，不會造成代碼冗余；基類未被繼承時，也會被編譯成css代碼
- placeholder 基類未被繼承時不會被編譯成css代碼
總結(jié)：
以上所述是小編給大家介紹的vue安裝和使用scss及sass與scss的區(qū)別詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue項目使用websocket連接問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue項目中使用window的onresize事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下2022-04-04
Vue?3已經(jīng)穩(wěn)定了相當長一段時間了。許多代碼庫都在生產(chǎn)環(huán)境中使用它，其他人最終都將不得不遷移到Vue?3。我現(xiàn)在有機會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免2023-03-03
本文分步驟給大家介紹了vue中引入mxGraph的方法，非常不錯，給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
vue+elementUI-el-table實現(xiàn)動態(tài)顯示隱藏列方式
這篇文章主要介紹了vue+elementUI-el-table實現(xiàn)動態(tài)顯示隱藏列方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
最近需要做一個el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價值,感興趣的可以了解一下2023-09-09
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了layui實際項目使用過程中遇到的兼容性問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue3封裝 Message消息提示實例函數(shù),具有一定的實用價值,需要的朋友可以參考下，希望能夠給你帶來幫助2021-09-09