vue安裝和使用scss及sass與scss的區(qū)別詳解
1. 安裝依賴：npm install node-sass sass-loader -D
2. webpack.base.conf.js文件
module: {
{ //手動(dòng)添加這一條，相當(dāng)于是編譯識(shí)別sass!
test: /\.scss$/,
loaders: ["style", "css", "sass"]}
}
3. 在.vue文件中使用
<style scoped lang="scss">
.box{
width: 100%; :hover{ color: red; }
}
</style>
下面看下sass與scss的區(qū)別
用了很久css預(yù)編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點(diǎn)尷尬，找了個(gè)教程擼了遍==。。。
1.異同：簡言之可以理解scss是sass的一個(gè)升級(jí)版本，完全兼容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進(jìn)表示嵌套關(guān)系，scss是花括號(hào)
//sass 太費(fèi)眼了
.father
width:100px;
.son
width:50px;
//scss 適合我這種眼瘸手殘患者
.father{
width:100px;
.son{
width:50px;
}
}
2 .scss功能很強(qiáng)大的樣子，能做運(yùn)算、寫函數(shù)啥的，但是我只是作為語法糖用而已，只看了些基礎(chǔ)功能
我個(gè)人常用的功能有：
- 嵌套
- 變量 $color : #111111;
- 混入 @mixin
- 繼承 @extend
3.一個(gè)關(guān)于@mixin、@extend、%placeholder的適用場景總結(jié)
- mixin 可以傳變量
- extend 不可以傳變量，相同樣式直接繼承，不會(huì)造成代碼冗余；基類未被繼承時(shí)，也會(huì)被編譯成css代碼
- placeholder 基類未被繼承時(shí)不會(huì)被編譯成css代碼
總結(jié)：
以上所述是小編給大家介紹的vue安裝和使用scss及sass與scss的區(qū)別詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue的props實(shí)現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細(xì)介紹了vue的props如何實(shí)現(xiàn)子組件隨父組件一起變化,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vue中使用js制作進(jìn)度條式數(shù)據(jù)對比動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Vue中使用js制作進(jìn)度條式數(shù)據(jù)對比動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
el-date-picker如何篩選時(shí)間日期選擇范圍
這篇文章主要介紹了el-date-picker篩選時(shí)間日期選擇范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-12-12
Vue項(xiàng)目獲取url中的參數(shù)(親測可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3 中使用vue?img?cutter?圖片裁剪插件的方法
這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下2024-05-05
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對應(yīng)變化詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中的核心就是組件，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，下面通過本文重點(diǎn)給大家介紹vue 創(chuàng)建組件及組件使用方法，感興趣的朋友一起看看吧2017-07-07
antd?vue?表格rowSelection選擇框功能的使用方式
這篇文章主要介紹了antd?vue?表格rowSelection選擇框功能的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。2022-12-12