[css] 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로 시작하십시오.