scoped 與 /deep/，限制跳脫CSS作用範圍
===

在相對複雜的大型專案開發下，需要一套好維護的CSS架構，使用 ```scoped``` 限制了CSS的作用範圍，避免CSS的樣式覆蓋到其他地方。

scoped:限制CSS作用範圍
---

<style lang="scss" scoped>
</style>

/deep/:跳脫CSS作用範圍
---

覆蓋CSS我們常用 ```!important```，但被 ```scoped``` 限制的範圍，如果需要覆蓋的話，可以使用大絕招 ```/deep/``` 。

<style lang="scss" scoped>
    /deep/ h1{
        color: red;  // 覆蓋h1的顏色
    }
</style>

:::warning
非必要建議盡量不要使用 ```/deep/``` 和 ```!important``` ，這會造成程式維護困難，必須小心使用。
:::

###### tags: `CSS` `SCSS` `前端開發筆記`