国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SASS @extend官方文檔剖析

宋華 / 3307人閱讀

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

@extend用法剖析

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

我們經(jīng)常會遇到這樣的情況，當我們在開發(fā)頁面時候一個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;
}

這里就出現(xiàn)我們剛說的問題了，其實我們心里是十萬個不愿意就這么在后面唐突的加個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實現(xiàn)的方式是跟我們現(xiàn)實邏輯顛倒的。

但是如果改成這樣：

 .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相關(guān)樣式先拷貝一份，

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

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

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

當組合選擇器的樣式時， @extend 能夠很聰明得避免不必要的重復，例如.seriousError.seriousError會被轉(zhuǎn)換成.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內(nèi) “@extend .seriousError”這句話。在運行這句語句時候，sass會檢測到.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, 目前還不能被擴展. 但是對于嵌套的選擇器還是可以使用@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; }

當兩個沒有共同點的序列擴充組合時候, 將會產(chǎn)生兩個不同的選擇器: 一種是第一個序列在前，另一種是第二個序列在前例如： #admin .tabbar會和#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; }

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111360.html

相關(guān)文章

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

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

    Charlie_Jade 評論0 收藏0

  • gulp-work-flow 前端工作流原來可以這么簡單

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

    weakish 評論0 收藏0

  • sass的基本使用

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

    alighters 評論0 收藏0

  • React+TypeScript+Mobx+AntDesignMobile進行移動端項目搭建

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

    lindroid 評論0 收藏0

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

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

    I_Am 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<