CSS에서 @apply는 무엇입니까?

우선 CSS 태그를 언급하고 있습니다.

나는 봤다 @apply 했지만 그 의미를 제대로 설명 할 수있는 것을 찾을 수 없었다.

그러한 태그의 사용법은 무엇입니까?

그것을 설명하는 간단한 방법은 다음과 같습니다. css (sass와 같은 전 처리기의 기능)에 변수를 도입하고 동작과 같은 기능을하는 mixin (전 처리기에서도).

그것이 --header-theme함수 라고 상상해보십시오 (믹신)

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

이렇게하면 다시 쓸 필요없이 여러 곳에서 사용할 수 있습니다. DRY

이제 변수 부분은이 예제로 설명 할 수 있습니다.

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green; 
  @apply --header-theme;
}

믹스 인에는 변수가 전송되고 색상이 변경됩니다.

이것은 기능의 한계가 아닙니다. 훨씬 더 많이 사용할 수 있습니다. 이 블로그 게시물 을 읽도록 제안한 후 SASS의 mixin 및 변수에 대해 더 많은 사용 방법을 읽을 수 있습니다.

지금 내가 당신을 흥분시킨 후, 나쁜 소식을위한 시간입니다. 그것은 아직 브라우저에서 구현되지 않았습니다. 크롬 , 그것이 다가오고 있다는 것을 아는 것이 여전히 가치가 있으며 아마도 당신이 준비하고 싶다면 SASS로 시작하십시오.

@apply그 이후로 포기 된 제안 에서 나온 것이고 CSS Shadow Parts 로 대체 되었습니다 .

@apply 규칙은 작성자가 명명 된 변수에 속성 ​​집합을 저장 한 다음 다른 스타일 규칙에서 참조 할 수 있도록합니다.

@apply꽤 멋지다. 기본적으로 CSS 블록을 복사하지 않고 선택기를 수정할 필요없이 재사용 할 수 있습니다.

CSS 프레임 워크를 더 쉽게 사용하고 동시에 시맨틱 클래스 이름을 유지할 수 있습니다.

이 기사 가이 기능에 대한 좋은 설명이 된다는 것을 알았습니다 .

불행히도 현재 브라우저 지원은 기본적으로 존재하지 않습니다 . PostCSS 와 같은 CSS 전처리 기와 함께 사용할 수 있습니다 .

잘 이해하면 미래도 불확실합니다. 이 기능의 주된 지지자 는 지원을 중단했습니다 .