layer

## @layer

그룹화 & 우선순위를 정하기

- 레이어는 선언 순서에 따라 스타일이 적용되며, 늦게 선언될수록 높은 우선순위를 갖는다

-  순서를 미리 정의하는것도 가능하다

```css

@layer layer_1 {

  .text {

    color: red;

    font-weight: 700;

  }

}

@layer layer_2 {

  .text {

    color: blue;

  }

}

@layer layer_3 {

  .text {

    color: orange;

    font-weight: 400;

  }

}

```

-> 3, 2, 1

```css

@layer layer_3, layer_1, layer_2

```

추가시 2, 1, 3

- 이름 재사용가능 (같은 이름 시 위에 추가된다는 개념)

- 익명 / url로 외부스타일의 레이어 생성가능

```css

@layer { ... }

@import url(basic.css) layer;

```

- revert-layer로 이전 레이어 스타일 적용

- @layer로 선언치 않은 스타일은 높은 우선순위를 가진다.

- 레이어 끼리 되어있는 것은 우선순위에서 선택자 명시도는 무의미

---