SASS @extend官方文檔剖析

宋華發(fā)布于2019-08-29 11:00 / 3311人閱讀

摘要：但是這兩個(gè)其實(shí)都是相差無幾的，只是有細(xì)微的差別。目前就先這樣理解，其實(shí)這個(gè)實(shí)現(xiàn)的方式是跟我們現(xiàn)實(shí)邏輯顛倒的。但是為了避免不必要的重復(fù)。和會(huì)調(diào)換位置，換完之后在省略重復(fù)的。

@extend用法剖析

提醒：建議繼承那些干凈的無后代寫法的樣式

我們經(jīng)常會(huì)遇到這樣的情況，當(dāng)我們?cè)陂_發(fā)頁面時(shí)候一個(gè)class需要包含前一個(gè)class的所有樣式，但是又必須有他自己特殊新增的樣式。但是這兩個(gè)class其實(shí)都是相差無幾的，只是有細(xì)微的差別。比如錯(cuò)誤提示的樣式(.error和.specialerror),既然后著只是比前者多一兩句樣式，為何還要寫兩個(gè)class呢，因?yàn)槲覀儾幌氚亚罢?error的樣式重新在寫一遍，無聊極了。但是這樣帶來一個(gè)問題，就是html標(biāo)簽上會(huì)多出好幾個(gè)class。

為了解決這個(gè)問題，sass里提供了@extend的解決方法
先看一個(gè)例子：


  Oh no! You"ve been hacked!

我們的css如下

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.specialerror {
  border-width: 3px;
}

這里就出現(xiàn)我們剛說的問題了，其實(shí)我們心里是十萬個(gè)不愿意就這么在后面唐突的加個(gè)specialerror的，因?yàn)槿绻粚憇pecialerror，就丟失了前面的樣式（為什么呢，因?yàn)槲覀儧]有在specialerror里復(fù)寫error的樣式，只是新增了）

通過Sass的@extend，一個(gè)選擇器將繼承另一個(gè)選擇器的樣式
例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.specialerror {
  @extend .error;
  border-width: 3px;
}

被編譯為：

.error, .specialerror {
  border: 1px #f00;
  background-color: #fdd;
}

.specialerror {
  border-width: 3px;
}

意味著.error所有的樣式都會(huì)加到.specialerror上，這樣.specialerror就會(huì)有.error的樣式了。這樣我們就可以只寫.specialerror了。目前就先這樣理解，其實(shí)這個(gè)@extend實(shí)現(xiàn)的方式是跟我們現(xiàn)實(shí)邏輯顛倒的。

但是如果改成這樣：

 .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .specialerror {
      @extend .error;
      border-width: 3px;
    }
    .error.intrusion {
      background-image: url("/image/hacked.png");
    }

加上面這段樣式后

就會(huì)加上和

一樣的背景

怎么做到的呢

.error {
      border: 1px #f00;
      background-color: #fdd;
    }
    
.error.intrusion {
  background-image: url("/image/hacked.png");
}

.specialerror {
  @extend .error;
  border-width: 3px;
}

被編譯為：

.error, .specialerror {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .specialerror.intrusion {
  background-image: url("/image/hacked.png"); }

.specialerror {
  border-width: 3px; }

這里需要重點(diǎn)講解下，其實(shí)我們正常理解增加擴(kuò)充添加就是copy然后paste,是的，這樣思考其實(shí)也是對(duì)的，就像文章一開始那個(gè)最簡(jiǎn)單的例子。但是為了避免不必要的重復(fù)。@extend的邏輯稍稍不同。你可以這樣認(rèn)為，使用@extend時(shí)候sass會(huì)將.error相關(guān)樣式先拷貝一份，

 .specialerror {
      @extend .error;
      border-width: 3px;
    }

然后把字符“specialerror”存儲(chǔ)在@extend里，遇到”error“字符就進(jìn)行替換，這樣.specialerror就有了.error的樣式啦！這也就能解釋，為什么會(huì)出現(xiàn)下面.specialerror.intrusion的原因了。

  .error.intrusion, .specialerror.intrusion {
      background-image: url("/image/hacked.png"); }

當(dāng)組合選擇器的樣式時(shí)， @extend 能夠很聰明得避免不必要的重復(fù)，例如.seriousError.seriousError會(huì)被轉(zhuǎn)換成.seriousError。不會(huì)生成類似#main#footer的不可用選擇器。

求證例子：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

被編譯為：

a:hover, .hoverlink {
  text-decoration: underline; }

就像上面的.error.intrusion ,任何使用 a:hover 都會(huì)替換為 .hoverlink,即使中間包含其他選擇器。例如：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

被編譯為：

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

Multiple Extends

一個(gè)選擇器還可以擴(kuò)充多個(gè)選擇器的樣式例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

被編譯為：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

對(duì)于下面這種只需注意下就行，就是.criticalError內(nèi) “@extend .seriousError”這句話。在運(yùn)行這句語句時(shí)候，sass會(huì)檢測(cè)到.seriousError內(nèi)有“@extend .error”。
所以.criticalError既有.error的樣式也有.seriousError的樣式，故criticalError需要替換的是error和seriousError。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

被編譯為：

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

選擇器序列
例如.foo .bar或者 .foo + .bar, 目前還不能被擴(kuò)展. 但是對(duì)于嵌套的選擇器還是可以使用@extend添加到其他選擇器的例如：

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

編譯為：

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

當(dāng)兩個(gè)沒有共同點(diǎn)的序列擴(kuò)充組合時(shí)候, 將會(huì)產(chǎn)生兩個(gè)不同的選擇器: 一種是第一個(gè)序列在前，另一種是第二個(gè)序列在前例如： #admin .tabbar會(huì)和#demo .overview調(diào)換位置。

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

被編譯為：

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

如果另個(gè)序列有一些共同的選擇器，這些選擇器將會(huì)被組合在一起而且只有不同的將會(huì)保留下來。下面這個(gè)例子中，每個(gè)寫都包含id #admin, 所以產(chǎn)生的選擇器就會(huì)合并這兩個(gè)#admin。#admin .tabbar和 #admin .overview會(huì)調(diào)換位置，換完之后在省略重復(fù)的。

  #admin .tabbar a {
      font-weight: bold;
    }
    #admin .overview .fakelink {
      @extend a;
    }

這被編譯為：

 #admin .tabbar a,
    #admin .tabbar .overview .fakelink,
    #admin .overview .tabbar .fakelink {
      font-weight: bold; }

云服務(wù)器 GPU云服務(wù)器 webrtc官方文檔 Kfaka官方文檔 hbase官方文檔 mongodb官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111360.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

宋華

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux強(qiáng)改密碼

閱讀 3123·2021-11-18 10:02
CloudCone：洛杉磯MC機(jī)房KVM VPS，1核1G內(nèi)存50GB硬盤1TB流量@1Gbps帶寬

閱讀 2628·2021-10-13 09:47
主機(jī)名什么意思-主機(jī)域名中哪個(gè)表示主機(jī)名？

閱讀 3077·2021-09-22 15:07
0基礎(chǔ)學(xué)編程,學(xué)前端-請(qǐng)先看完這個(gè)

閱讀 810·2019-08-30 15:43
CSS 實(shí)現(xiàn)隱藏滾動(dòng)條同時(shí)又可以滾動(dòng)內(nèi)容

閱讀 1825·2019-08-30 10:59
html+css+js+Hbuilder開發(fā)一款安卓APP，根本不用學(xué)Android開發(fā)！

閱讀 1706·2019-08-29 15:34
不能錯(cuò)過的web前端性能優(yōu)化總結(jié)

閱讀 1718·2019-08-29 15:06
CSS3-選擇器-結(jié)構(gòu)化偽類

閱讀 454·2019-08-29 13:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

SASS @extend官方文檔剖析

相關(guān)文章

【React 實(shí)戰(zhàn)教程】從0到1 構(gòu)建 github star管理工具

gulp-work-flow 前端工作流原來可以這么簡(jiǎn)單

sass的基本使用

React+TypeScript+Mobx+AntDesignMobile進(jìn)行移動(dòng)端項(xiàng)目搭建

wepy - 一個(gè)小程序的組件化開發(fā)框架

發(fā)表評(píng)論

0條評(píng)論

宋華

男|高級(jí)講師

TA的文章

linux強(qiáng)改密碼

CloudCone：洛杉磯MC機(jī)房KVM VPS，1核1G內(nèi)存50GB硬盤1TB流量@1Gbps帶寬

主機(jī)名什么意思-主機(jī)域名中哪個(gè)表示主機(jī)名？

0基礎(chǔ)學(xué)編程,學(xué)前端-請(qǐng)先看完這個(gè)

CSS 實(shí)現(xiàn)隱藏滾動(dòng)條同時(shí)又可以滾動(dòng)內(nèi)容

html+css+js+Hbuilder開發(fā)一款安卓APP，根本不用學(xué)Android開發(fā)！

不能錯(cuò)過的web前端性能優(yōu)化總結(jié)

CSS3-選擇器-結(jié)構(gòu)化偽類

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

SASS @extend官方文檔剖析

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！