---
type: slide
---

# @layer

###### tags: `HyUI4.0`

---

**@layer**
照字面上看就是層的意思，可以想像成photo的圖層

在CSS中，權重排序是這樣

!important > animation > inline-style > id > class > tag > *

---

我們很容易被權重搞得烏煙瘴氣
例如

.box .content {
  background-color: red;
}

.content {
  background-color: green;
}

以上這兩個css.content實際呈現的顏色是什麼？

---

答案是紅色
<iframe height="300" style="width: 100%;" scrolling="no" title="sample" src="https://codepen.io/tseng7510/embed/RwJLjVG?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

這是比較簡單的範例而且就在下面，也許會比較容易看得出來
但一定會遇到明明改了卻一直被其他的css影響到

---

4.0使用最基本的@layer

---

使用方式很簡單，只要將CSS內容使用 @layer{} 包起來命名即可
照預設的狀況下，會由上而下判讀，後面會蓋掉面的

被@layer包住的內容權重會比 沒被@layer包住 的低，不會被順序影響

<iframe height="300" style="width: 100%;" scrolling="no" title="sample2" src="https://codepen.io/tseng7510/embed/BaVvvXO?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

---

!important在@layer裡面要謹慎使用，上面說過在兩個@layer的狀況下
後面會蓋掉前面的，但如果這時候前面下!important，在一般的邏輯下
背景色會是紅色

@layer layerA {
  .box .content {
    background-color: red !important;
  }
}

@layer layerB {
  .content {
    background-color: green;
  }
}

---

但如果兩個都增加!important

@layer layerA {
  .box .content {
    background-color: red !important;
  }
}

@layer layerB {
  .content {
    background-color: green;
  }
}

---

這時候背景色還是會一樣維持紅色，因為當使用imporatnt的時候越前面的權重反而會越大
而這個權重，是會蓋過沒有用@layer包住的css

@layer layerA {
  .box .content {
    background-color: red !important;
  }
}

.content {
  background-color: green;
}

---

呈現背景維持紅色
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/tseng7510/embed/rNKoRBG?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/rNKoRBG">
Untitled</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
在使用上需要特別注意

---

@layey 也支援另外設定排序，只要宣告排序即可
左邊權重大於右邊，每個@layer中間需要 , 做分隔

@layer layerA, layerB;

@layer可以解決權重的問題，用的好甚至不再需要使用!important
目前只講最基本的使用方式，@layer還可以使用巢狀的方式處理
有興趣的可以參考以下影片
[https://www.youtube.com/watch?v=H3uvgwFSgtg&t=2896s](https://)

<style>
.reveal h1{
font-size:2em;
}
.reveal h1,.reveal h2 {
color:#c9f2ff;
}
</style>