SASS @extend官方文檔剖析

宋華發布于2019-08-29 11:00 / 3302人閱讀

摘要：但是這兩個其實都是相差無幾的，只是有細微的差別。目前就先這樣理解，其實這個實現的方式是跟我們現實邏輯顛倒的。但是為了避免不必要的重復。和會調換位置，換完之后在省略重復的。

@extend用法剖析

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

我們經常會遇到這樣的情況，當我們在開發頁面時候一個class需要包含前一個class的所有樣式，但是又必須有他自己特殊新增的樣式。但是這兩個class其實都是相差無幾的，只是有細微的差別。比如錯誤提示的樣式(.error和.specialerror),既然后著只是比前者多一兩句樣式，為何還要寫兩個class呢，因為我們不想把前者.error的樣式重新在寫一遍，無聊極了。但是這樣帶來一個問題，就是html標簽上會多出好幾個class。

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


  Oh no! You"ve been hacked!

我們的css如下

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

這里就出現我們剛說的問題了，其實我們心里是十萬個不愿意就這么在后面唐突的加個specialerror的，因為如果只寫specialerror，就丟失了前面的樣式（為什么呢，因為我們沒有在specialerror里復寫error的樣式，只是新增了）

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

.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所有的樣式都會加到.specialerror上，這樣.specialerror就會有.error的樣式了。這樣我們就可以只寫.specialerror了。目前就先這樣理解，其實這個@extend實現的方式是跟我們現實邏輯顛倒的。

但是如果改成這樣：

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

加上面這段樣式后

就會加上和

一樣的背景

怎么做到的呢

.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; }

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

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

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

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

當組合選擇器的樣式時， @extend 能夠很聰明得避免不必要的重復，例如.seriousError.seriousError會被轉換成.seriousError。不會生成類似#main#footer的不可用選擇器。

求證例子：

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

被編譯為：

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

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

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

被編譯為：

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

Multiple Extends

一個選擇器還可以擴充多個選擇器的樣式例如：

.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; }

對于下面這種只需注意下就行，就是.criticalError內 “@extend .seriousError”這句話。在運行這句語句時候，sass會檢測到.seriousError內有“@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, 目前還不能被擴展. 但是對于嵌套的選擇器還是可以使用@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; }

當兩個沒有共同點的序列擴充組合時候, 將會產生兩個不同的選擇器: 一種是第一個序列在前，另一種是第二個序列在前例如： #admin .tabbar會和#demo .overview調換位置。

#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; }

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

  #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; }

GPU云服務器云服務器 webrtc官方文檔 Kfaka官方文檔 hbase官方文檔 mongodb官方文檔

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111360.html

【React 實戰教程】從0到1 構建 github star管理工具

摘要：公司的前端技術棧是，而筆者之前使用的是，因此正好想利用的自己構建個的管理項目來加深的使用。會出現不在尾部的問題。前言在日常使用github中，除了利用git進行項目版本控制之外，最多的用處就是游覽各式的項目，在看到一些有趣或者有用的項目之后，我們通常就會順手star，目的是日后再看。但是當我們star了許多項目之后，回過頭想找一個的項目就會發現，很難在短時間內找到它，官方也并沒有提...

Charlie_Jade 2019-08-23 11:58 評論0 收藏0
gulp-work-flow 前端工作流原來可以這么簡單

摘要：話不多說，今天的主題是使用打造傳統項目的前端工作流。是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。這意味著，你可以用的方式編寫程序，又不用擔心現有環境是否支持。概述最近前端一直是一個火熱的話題，前端技術棧也是伴隨著nodejs的出現而更替的飛快，導致大部分前端開發者曾一度迷茫在這各種技術選型上，比如前端自動化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 評論0 收藏0
sass的基本使用

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預處理器，文件后綴名為，可以用中的來轉成樣式。最近在項目中利用到了css預處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業余的時間里搜了一些資料來看看，看完后覺得sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內容都是本博主覺得比較有...

alighters 2019-08-30 15:53 評論0 收藏0
React+TypeScript+Mobx+AntDesignMobile進行移動端項目搭建

摘要：通過裝飾器或者利用時調用的函數來進行使用下面代碼中當或者發生變化時，會監聽數據變化確保通過觸發方法自動更新。只能影響正在運行的函數，而無法影響當前函數調用的異步操作參考官方文檔用法裝飾器函數遵循中標準的綁定規則。前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術棧,使用Create-React-App腳手架進行一個移動端項目搭建，主要介紹項...

lindroid 2019-08-23 18:24 評論0 收藏0
wepy - 一個小程序的組件化開發框架

摘要：主要解決問題開發模式轉換在原有的小程序的開發模式下進行再次封裝，更貼近于現有框架開發模式。官方代碼獲取應用實例事件處理函數基于的實現支持組件化開發。根組件，一般都是頁面父組件小程序對象子組件列表方法參數返回值說明組件初始化。小程序框架wepy文檔 Github地址快速入門項目創建與使用安裝wepy 以下安裝都通過npm安裝安裝 wepy 命令行工具。 npm install ...

I_Am 2019-08-20 12:30 評論0 收藏0