摘要：下面是頭部的樣式示例這是一個(gè)用例我在之前了解過自定義屬性的用法。這里有一個(gè)正在進(jìn)行中的規(guī)則的規(guī)范與之相關(guān)。允許儲存一系列的屬性并且在選擇器引用。

原文鏈接：https://tylergaw.com/articles...
譯者：Icarus
郵箱：xdlrt0111@163.com

多年來我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件來嘗試處理樣式.我愛死了現(xiàn)在就可以使用將來的CSS特性,相對于之前我用的工具,它們更順手一些.我的個(gè)人站點(diǎn)就是嘗試新特性的最好的測試地.

第一步是列出我Sass用法的清單.我需要知道我使用了哪些特性,并且確信新特性在postCSS中有替代品.以下是我正在這個(gè)項(xiàng)目中使用的特性：

部分引用（partial import）

變量（variables）

嵌套（nesting）

混合宏（mixins）

拓展（extend）

占位類（placeholder classes）

顏色函數(shù)（darken and rgba color functions）

壓縮（compression）

在切換到新語法之后我需要做一些準(zhǔn)備.現(xiàn)在項(xiàng)目的目錄結(jié)構(gòu)是Sass的典型用法.我用下劃線（_）來命名文件,文件的拓展名為scss.我使用兩個(gè)文件夾來組織Sass文件.moudules文件夾保存不直接產(chǎn)生CSS的Sass文件,像是變量、占位類和混合宏.partials保存編譯出CSS的Sass文件.

這是最初的文件結(jié)構(gòu)：

css/
  scss/
    modules/
      _module.scss
      ...
    partials/
      _partial.scss
      ...
    tylergaw.scss

每個(gè)Sass組件會在tylergaw.scss中引入.

@import "modules/setup";
@import "modules/reset";
@import "modules/fonts";

我重新組織并且重命名了文件.我先把所有文件的后綴名從scss改為css.我使用了一個(gè)Bash腳本來完成這項(xiàng)工作,而不是一個(gè)一個(gè)修改.

`for f in *.scss; do git mv -- "$f" "${f%.scss}.css"; done;`

前面的下劃線是編寫Sass的習(xí)慣所以我也去掉了它.我沒辦法使用Bash命令一次性完成,所以只能手動(dòng)每個(gè)去修改.

最后一步就是將所有的CSS文件都移動(dòng)至modules文件夾并且刪除partials文件夾.我認(rèn)為將所有CSS都當(dāng)成modules來管理要比將他們按照moudules/partials拆分更容易理解.

我以PostCSS CLI為起始,在package.json里添加了一個(gè)臨時(shí)的構(gòu)建腳本命令：

"scripts": {
  "postcss": "postcss -o public/css/tylergaw.css src/css/tylergaw.css"
}

在沒有更改任何樣式的情況下我編譯了CSS：

`npm run postcss`

正常工作.控制臺沒有報(bào)錯(cuò),但是頁面上沒有任何CSS樣式.

構(gòu)建過程是可用的,現(xiàn)在的任務(wù)是把樣式找回來.

在Chrome的控制臺里我看到了很多404信息.這表示我們第一個(gè)丟失的特性就是內(nèi)聯(lián)@import.tylergaw.css通過@import來引入CSS模塊.瀏覽器看到這些,知道它要做什么.瀏覽器會通過HTTP請求來加載每個(gè)模塊.我的構(gòu)建過程只復(fù)制了一個(gè)獨(dú)立的CSS文件,而不是每個(gè)模塊.正因如此,瀏覽器找不到它們.

我可以改變構(gòu)建過程來讓默認(rèn)的@import工作,但那樣效率很低.我需要一個(gè)Sass樣式內(nèi)聯(lián)@import的替代品.

postcss-import插件可以代替Sass中的@import,在通過npm安裝之后,我更新了構(gòu)建腳本代碼：

"scripts": {
  "postcss": "postcss -u postcss-import -o public/css/tylergaw.css src/css/tylergaw.css"
}

再次運(yùn)行npm run postcss,單個(gè)的CSS文件就包含了所有模塊.現(xiàn)在的頁面就展示出了部分樣式.

在Sass中展現(xiàn)出內(nèi)聯(lián)方式的@import功能是非常強(qiáng)大的.它讓我們能更好的組織樣式.我不確定將來這個(gè)功能會不會原生支持.我們使用這種功能時(shí)總是需要一步編譯,看起來也不壞.

我想postcss-import插件會成為我PostCSS的一個(gè)主要配置,對其他人來說應(yīng)該也一樣.下面引用了插件作者的看法：

This plugin should probably be used as the first plugin of your list. This way, other plugins will work on the AST as if there were only a single file to process, and will probably work as you can expect.
[postcss-import](https://github.com/postcss/postcss-import#postcss-import)

cssnext是PostCSS中一個(gè)插件,用于將未來CSS特性編譯為現(xiàn)今支持的特性.特別需要指出,它和Sass或Less并非不同的語言.它提供正在進(jìn)行中的CSS規(guī)范的特性.一些特性已經(jīng)得到瀏覽器支持.另外一些還處于規(guī)范的初始階段.

我使用cssnext來填補(bǔ)失去的Sass特性留下的鴻溝.

在構(gòu)建這個(gè)網(wǎng)站之前我了解過Autoprefixer.我用自定義Sass混合宏來解決添加所需要的前綴的問題.cssnext包含了Autoprefixer,所以我可以將這整個(gè)混合宏模塊移除.

下一步我將Sass變量改為CSS自定義屬性.比如在_setup.scss中,我這樣寫:

$grey: #1e1e1d;
$yellow: #ffad15;
$offwhite: #f8f8f8;
$darkerwhite: darken($offwhite, 15);

這不是所有我使用的Sass變量,但是主要就這些.剩下都在獨(dú)立的模塊中.

注意: 自定義屬性和變量的區(qū)別.CSS自定義屬性只在屬性值有效,不能用于選擇器,屬性名或媒體查詢.

新的setup.css:

:root {
  --white: #fff;
  --grey: #1e1e1d;
  --yellow: #ffad15;
  --offwhite: #f8f8f8;
  ...
}

以下為使用示例:

a {
  color: var(--yellow);
}

除了語法,CSS自定義屬性和Sass變量工作方式是相同的.由于瀏覽器支持的限制,自定義屬性值仍然需要編譯.在上面的示例中,編譯后的值為color: #ffad15.

在之前的例子中,我遺漏了一個(gè)變量:$darkerwhite: darken($offwhite, 15);.這是另一個(gè)我需要尋找替代的Sass特性.這里有一個(gè)規(guī)范草案提供CSS顏色函數(shù).cssnex現(xiàn)在包含這些函數(shù),這非常酷.下面是setup.css,其中darkerwhite自定義屬性是通過顏色函數(shù)和陰影調(diào)節(jié)器來實(shí)現(xiàn)的.

:root {
  ...
  --offwhite: #f8f8f8;
  --darkerwhite: color(var(--offwhite) shade(20%));
  ...
}

顏色函數(shù)提供了許多調(diào)節(jié)器.你可以在一個(gè)函數(shù)中使用多個(gè)調(diào)節(jié)器:

`background-color: color(#d32c3f shade(40%) alpha(40%));`

編譯結(jié)果為:

`background-color: rgba(127, 26, 38, 0.4);`

再次重申,現(xiàn)在cssnext會將color()編譯為16進(jìn)制或rgba的色值.當(dāng)顏色函數(shù)得到瀏覽器支持后,編譯過程就沒有必要了.顏色操作在運(yùn)行時(shí)就可以發(fā)生.

嵌套是CSS預(yù)處理器不可或缺的特性.任何讓人舒服的樣式工具的必需品.Tab Atkins對CSS嵌套有一個(gè)正在進(jìn)行中的規(guī)范,并且cssnext讓它成為現(xiàn)實(shí).

CSS的嵌套語法包含一個(gè)前置于內(nèi)層的&,以下為sass片段:

.projects-list {
  ...

  li {
    & > div {...}
  }

  a {
    ...

    &:hover,
    &:focus {...}

    &::after {...}
  }

  @media (min-width: 640px) {...}
}

對于CSS嵌套,我將它修改為以下形式:

.projects-list {
  ...

  & li {
    & > div {...}
  }

  & a {
    ...

    &:hover,
    &:focus {...}

    &::after {...}
  }

  @media (min-width: 640px) {...}
}

基本的嵌套需要前置的&.偽類和選擇器在Sass和CSS中是相同的.媒體查詢不需要前置&.

另外值得注意的是@nest.正如文檔中提到的,復(fù)雜的嵌套可能需要引入@nest來代替&.這個(gè)項(xiàng)目我還沒有用到,或許將來用得到.

Sass中的@extend和占位類是我經(jīng)常使用的兩個(gè)特性。下面是Futura頭部的樣式示例：

%futura {
  font-family: "futura-pt", helvetica, sans-serif;
}

%futura-heading {
  @extend %futura;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

這是一個(gè)用例：

.my-heading {
  @extend %futura-heading;
}

我在之前了解過CSS自定義屬性的用法。這里有一個(gè)正在進(jìn)行中的@apply規(guī)則的規(guī)范與之相關(guān)。@apply允許儲存一系列的屬性并且在選擇器引用。我用@apply來代替Sass的extend.

回到setup.css來,我更新了Futura頭部的屬性:

:root {
  ...

  --franklin: {
    font-family: "futura-pt", helvetica, sans-serif;
  };

  --franklin-heading: {
    @apply --franklin;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
  };
}

這里是一個(gè)示例:

.my-heading {
  @apply --franklin-heading;
}

@apply不是繼承.在目前的cssnext中,@apply將屬性和值直接復(fù)制到每條規(guī)則中.這是個(gè)小項(xiàng)目所以沒問題.但是在大型的項(xiàng)目中,可能會導(dǎo)致樣式冗余,項(xiàng)目非常臃腫.這種情況下最好還是使用通用類名來適用相似情況.

現(xiàn)在我的網(wǎng)站看起來和之前一樣了.項(xiàng)目頁是個(gè)例外.它的每個(gè)磁貼區(qū)域都有不同顏色.接下來我會解釋怎么在沒有Sass的情況下正確且高效的編寫樣式.

我用Sass的混合宏來讓項(xiàng)目編寫樣式更簡便.這個(gè)混合宏有一個(gè)磁貼顏色的參數(shù).以下是這個(gè)project-block的混合宏.

@mixin project-block ($c) {
  background-color: $c;

  a {
    color: $c;

    &:hover {
      background-color: $c;
      color: $offwhite);
    }
  }
}

下面是一個(gè)示例:

.p-jribbble {
  @include project-block(#ff0066);
}

在寫這篇文章的時(shí)候,我還沒有在CSS找到能模擬這個(gè)功能的特性.自定義屬性配合@apply不是函數(shù),所以我們不能為它傳遞參數(shù).在將來,自定義選擇器可能會允許使用參數(shù).在草案規(guī)范中有一個(gè)看起來很有前途的復(fù)雜示例.但我承認(rèn)現(xiàn)在我還沒完全明白它是怎么工作的.

這不意味著我運(yùn)氣不好.我寫CSS的時(shí)間要長于Sass,但也沒多久.我還用了另一個(gè)正進(jìn)行中的規(guī)范特性,matches選擇器.

下面是一個(gè)代替project-block混合宏的CSS示例:

.p-jribbble,
.p-jribbble a:matches(:hover, :focus) {
  background-color: var(--color-jrb);

  & a {
    color: var(--color-jrb);
  }
}

顏色變量是早些在文件中:root作用域定義的.cssnext將以上CSS編譯為:

.p-jribbble,
.p-jribbble a:hover,
.p-jribbble a:focus {
  background-color: #ff0066
}

.p-jribbble a,
.p-jribbble a:hover a,
.p-jribbble a:focus a {
  color: #ff0066;
}

最后兩個(gè)選擇器...a a:hover和...a a:focus匹配不到任何元素.他們是不必要的.但是除了占用幾比特的空間他們也沒有任何影響.為了代碼的可讀性,我更傾向于a選擇器的嵌套.

為了樣式按順序回歸,我決定利用更多的PostCSS插件.我用css mqpacker來合并使用相同查詢條件的媒體查詢.我也用cssnano來優(yōu)化代碼.

這也是為什么我期待去使用PostCSS.使用Sass的時(shí)候我感覺困在當(dāng)前的特性中.但因?yàn)镻ostCSS本質(zhì)是一個(gè)插件集合在工作,更具拓展性.如果我有特殊需要,我可以自己來寫一個(gè)插件.它的潛力令人興奮.

在使用這個(gè)新工具工作了幾天后,我完全投入進(jìn)去了.從Sass轉(zhuǎn)向新的CSS語法非常簡單,并且是在五六年間我每個(gè)項(xiàng)目都用Sass編寫的情況下.

我喜歡這個(gè)思想轉(zhuǎn)變.cssnext對CSS的處理很像Babel對Javascript.它們都允許你去使用未來的特性來編寫代碼.