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

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

디렉티브 이 인지 인지 @apply요. 구글 검색해봤어요.@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과 변수에 대해 더 자세히 읽을 수 있으며, 이 블로그 게시물을 읽어보시기를 권합니다.

내가 당신을 흥분시켰으니 이제는 나쁜 소식을 들을 때입니다.아직 브라우저(Chrome)에서 구현되지는 않았지만, 아직 출시되고 있음을 알아야 하며, Sass부터 준비하고 싶다면 가능합니다.

@apply는 그 이후로 포기되고 CSS 섀도우 파츠로 대체된 제안서에서 나온 것입니다.

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

순풍은 이것을 특별 지시로 사용합니다.

@apply일종의 초특급입니다.이 규칙에 적용해야 하는 다른 클래스를 나열할 수 있습니다.저는 종종 함께 발견되는 수업을 함께 그룹화하는 방법이라고 생각합니다.

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

CSS 프레임워크 사용과 동시에 의미 클래스 이름을 유지하는 것을 더 쉽게 만들 것입니다.

저는 이 기사가 이 특집에 대한 좋은 지침이라고 생각했습니다.

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

제가 잘 이해한다면 미래 또한 불확실합니다.이 기능 뒤의 주요 옹호자는 이 기능을 지원하지 않았습니다.

언급URL : https://stackoverflow.com/questions/41067550/what-is-apply-in-css