欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue安裝和使用scss及sass與scss的區(qū)別詳解

 更新時(shí)間：2018年10月15日 09:57:00   作者：一勺豆  
這篇文章主要介紹了vue安裝和使用教程，用了很久css預(yù)編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點(diǎn)尷尬，感興趣的朋友一起看看吧

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.異同：簡(jiǎn)言之可以理解scss是sass的一個(gè)升級(jí)版本，完全兼容sass之前的功能，又有了些新增能力。語(yǔ)法形式上有些許不同，最主要的就是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ù)啥的，但是我只是作為語(yǔ)法糖用而已，只看了些基礎(chǔ)功能

  我個(gè)人常用的功能有：

  • 嵌套
  • 變量   $color : #111111;
  • 混入 @mixin
  • 繼承 @extend

3.一個(gè)關(guān)于@mixin、@extend、%placeholder的適用場(chǎng)景總結(jié)

  • mixin 可以傳變量
  • extend 不可以傳變量，相同樣式直接繼承，不會(huì)造成代碼冗余；基類未被繼承時(shí)，也會(huì)被編譯成css代碼
  • placeholder 基類未被繼承時(shí)不會(huì)被編譯成css代碼

總結(jié)：

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

相關(guān)文章

最新評(píng)論