女人书籍排行榜,武道至尊帝临小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS預(yù)處理語言的模塊化實(shí)踐

編寫css是前端工作中，一項(xiàng)普通而又頻繁的勞動(dòng)，由于css并不是一門語言，所以在程序設(shè)計(jì)上顯得有些簡陋。對(duì)于小型項(xiàng)目來說，css的量還不至于龐大，問題沒有凸顯，而如果要開發(fā)和持續(xù)維護(hù)一個(gè)較為大型的項(xiàng)目，那就需要對(duì)css進(jìn)行管理和規(guī)范了，否則會(huì)發(fā)生不可挽回的后果（嚇唬誰呢？？）。

背景

上一節(jié)【從css談模塊化】我們通過規(guī)范的約束，將css的編寫方式進(jìn)行了優(yōu)化和改進(jìn)，形成一種可持續(xù)發(fā)展的路線。但還是遺留了一些問題：冗余。雖然我們通過定義公共模塊和私有模塊，來委婉地分擔(dān)common的體積，但common的體積還是太大了，而且從設(shè)計(jì)上考慮，我們應(yīng)該盡量多地提煉公共模塊，以便更好地實(shí)現(xiàn)復(fù)用。最理想的情況是，所有的模塊都寄存在一個(gè)公共的庫里，哪里需要用到就從庫中直接調(diào)過來。這個(gè)美好的愿望不是不可實(shí)現(xiàn)的，借助預(yù)處理語言，我們可以很輕易地完成這事情。

預(yù)處理語言是一種類css的語言，我們知道css本身不是語言，而預(yù)處理語言的誕生，就是為填補(bǔ)這一部分語言功能。它實(shí)現(xiàn)了變量、函數(shù)、混合的定義，以及文件的引用、合并、壓縮功能，使得css也能面向?qū)ο?，?yīng)付復(fù)雜龐大的業(yè)務(wù)。

目前流行的預(yù)處理語言主要有兩種：less和sass。作為學(xué)習(xí)，兩者都可以入門一下，而作為工作，盡量熟悉一種。我比較常用sass，所以以下內(nèi)容都是以sass為基本語言做介紹，兩者在特性上有很多相似的地方，所以大家不必?fù)?dān)心實(shí)現(xiàn)上有什么千差萬別。

sass

基本語法可以到官網(wǎng)（英語）或者w3cplus sass guide（中文）查看學(xué)習(xí)，我們這里只簡單地過一遍，講一些我們需要用到的內(nèi)容，不會(huì)面面俱到。

sass有兩種后綴名文件：一種后綴名為sass，不使用大括號(hào)和分號(hào)；另一種就是我們這里使用的scss文件，這種和我們平時(shí)寫的css文件格式差不多，使用大括號(hào)和分號(hào)。而本教程中所說的所有sass文件都指后綴名為scss的文件。在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴(yán)格格式要求報(bào)錯(cuò)。 ——摘自w3cplus sass guide

1、嵌套（非常重要的特性）

sass的嵌套包括兩種：一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說起或用到的都是選擇器的嵌套。 ——摘自w3cplus sass guide
選擇器嵌套 所謂選擇器嵌套指的是在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承，從而增強(qiáng)了sass文件的結(jié)構(gòu)性和可讀性。在選擇器嵌套中，可以使用&表示父元素選擇器。 ——摘自w3cplus sass guide

 
 
  
  // index.scss   
     
  .g-index {   
    ...   
     
    .g-hd {   
      ...   
     
      .m-nav { ... }   
    }   
     
    .g-bd {   
      ...   
     
      .m-news { ... }   
    }   
     
    .g-ft {   
      ...   
     
      .m-copy_right { ... }   
    }   
     
    .m-dialog {   
      display: none;   
     
      &.z-active {  // 留意此處&的用法   
        display: block;   
      }   
    }   
  }

編譯后：

 
 
  
  /* index.css */   
     
  .g-index { ... }   
  .g-index .g-hd { ... }   
  .g-index .g-hd .m-nav { ... }   
     
  .g-index .g-bd { ... }   
  .g-index .g-bd .m-news { ... }   
     
  .g-index .g-ft { ... }   
  .g-index .g-ft .m-copy_right { ... }   
     
  .g-index .m-dialog {   
    display: none;   
  }   
     
  .g-index .m-dialog.z-active {  // 留意此處&的編譯結(jié)果   
    display: block;   
  }

是不是爽歪歪？再也不用一遍一遍地去復(fù)制和修改一大堆的選擇器，也不需要去整理它們之間的關(guān)系，只需要嵌套一下，所有的關(guān)系就如同直接看dom一樣簡單明了了！解放雙手，解放雙眼，同時(shí)還提高效率。值得留意的是，我們書寫sass的時(shí)候，應(yīng)該盡量保持sass的嵌套順序與dom一致，注意，是嵌套順序一致，而不是層次一致，因?yàn)椴⒉皇莇om里的所有元素都需要寫樣式。

我們再來提一個(gè)場景，說明sass的嵌套寫法利于維護(hù)，假設(shè)g-bd下原本有個(gè)模塊m-article_box，現(xiàn)在我們要把m-article_box從g-bd遷移到g-hd中（當(dāng)然這個(gè)需求有些不合理～），我們來看原始代碼：

文章標(biāo)題

文章簡介

新聞中心

其他資訊