vue中scss、sass和scss三者的區(qū)別是什么？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、龍川網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為龍川等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

2. webpack.base.conf.js文件

module: {
{ //手動添加這一條，相當(dāng)于是編譯識別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è)升級版本，完全兼容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進(jìn)表示嵌套關(guān)系，scss是花括號

//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 不可以傳變量，相同樣式直接繼承，不會造成代碼冗余；基類未被繼承時(shí)，也會被編譯成css代碼

• placeholder 基類未被繼承時(shí)不會被編譯成css代碼

總結(jié)：

關(guān)于vue中scss、sass和scss三者的區(qū)別是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

新聞標(biāo)題：vue中scss、sass和scss三者的區(qū)別是什么
標(biāo)題URL：http://www.aaarwkj.com/article10/igeodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、域名注冊、網(wǎng)站設(shè)計(jì)公司、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)