선택기 및 미디어 쿼리 개선을위한 PostCS 가이드

코어 포인트

PostCSS는 최신 CSS 기능에 폴리 필을 제공하는 다양한 플러그인을 제공하므로 개발자는 광범위한 브라우저 지원이 부족하더라도 새로운 기능을 시도 할 수 있습니다.

플러그인은 W3C 중첩 모듈 제안에 따라 중첩 된 스타일 규칙을 구현하여 부모 선택기를 참조하여 새로운 중첩 선택기를 소개합니다.

플러그인을 사용하면 변수에서 복제 선택기를 정의하고 코드 복제를 줄이고 코드 유지 보수를 개선 할 수 있습니다.
및
• 플러그인은 미디어 쿼리를 개선하여 사용하기 쉽고 스타일 시트의 복제를 줄일 수 있도록합니다. postcss-nesting & CSS 사양에 대한 최신 변경 사항은 몇 가지 흥미로운 기능을 소개합니다. 불행히도, 이러한 기능 중 일부는 여전히 초안 단계에 있으며 다른 기능은 광범위한 브라우저 지원이 부족합니다. 종종 새로운 제안은 브라우저에서 검토, 수락 및 구현되기까지 시간이 걸립니다. 그러나 대기 시간을 절약하고 PostCS를 사용하여 이러한 기능 중 일부를 시도 할 수 있습니다.
Postcss에는 최신 CSS 기능을위한 폴리 플릴을 구현하도록 설계된 다양한 플러그인이 있습니다. 이 플러그인은 매우 넓기 때문에 하나의 기사에서 모든 플러그인을 다루기가 어렵습니다. 대신 선택기 및 미디어 쿼리에 새로운 기능을 추가하는 데 중점을 둔 플러그인에 중점을 둘 것입니다. 많은 플러그인을 통해 스타일 시트의 구조를 크게 향상시킬 수있는 반면, 다른 플러그인은 깨끗한 구문 설탕을 상단에 추가 할 수 있습니다.
• 이 기사에서는 PostCS의 구성 및 설치를 자세히 소개하지 않습니다. 이것은 "PostCSS로 시작"및 "PostCS를 사용한 CSS 품질 향상"에 설명되어 있습니다. 빠른 참조로 Github의 PostCSS 페이지를 확인할 수도 있습니다. postcss-custom-selectors 규칙 중첩 모든 전처리 사용자에게 친숙한 가장 기본적인 기능부터 시작하겠습니다. 플러그인은 W3C 중첩 모듈 제안에 따라 중첩 된 스타일 규칙을 구현합니다.
제안은 부모 선택기를 참조하는 새로운
• 중첩 선택기를 소개합니다. 작거나 SASS와 달리,이 선택기는 사양에 의해 요구되며, 중첩을 활성화하기 위해 선택기 체인의 최초의 기본 선택기 여야합니다. 중첩 된 선택기를 포함하지 않은 모든 선택기는 무시됩니다. 예를 들면 : postcss-custom-media postcss-media-minmax 는 다음과 같이 변환됩니다
지정된대로

선택기를 사용하지 않기 때문에 다음 코드는 유효하지 않습니다.

셀렉터의 어느 곳에도 삽입 될 수 있도록 (처음에만 해당), 제안서는 중첩 된 at-rule 를 사용하도록 대체 구문을 정의합니다. 이전 예제에서 선택기를 수정할 수 있습니다.

이것은 다음으로 컴파일됩니다 :

문법은 또한

보다 표현력이 뛰어납니다.

커스텀 셀렉터

CSS를 작성할 때 우리는 많은 중복 선택기를 작성하는 경향이 있습니다. 이것은 모든 링크 또는 버튼을 선택하는 간단한 보일러 플레이트 코드 일 수 있습니다. 또는 반복적 인 반복이 필요한보다 복잡한 선택기 일 수 있습니다. 이것은 많은 코드 복제 및 모든 관련 코드 유지 보수 문제를 소개 할 수 있습니다. 새로운 CSS 확장 사양은 선택기를 변수에 저장하고 스타일 시트의 다른 부분에서 참조하는 방법을 소개합니다. 따라서 반복 선택기는 한 번만 정의해야하며 다른 곳에서 안전하게 재사용 할 수 있습니다.

postcss에는이 기능을 구현하는 플러그인이 있습니다. 다음은 모든 제목 요소 선택기를 정의하는 간단한 예입니다.

는 다음과 같이 컴파일됩니다

사용자 정의 선택기는 의사 클래스로 구현되므로 구문은 이상하게 보입니다.

사용자 정의 선택기는 기본 선택기와 효과적으로 사용할 수 있습니다. 예를 들면 : postcss-custom-selectors

컴파일 :

.article {
  color: #333;

  &.popular {
    background: #DDD;
  }

  & .title {
    font-weight: bold;
  }
}

더 복잡한 배열을 위해 여러 사용자 정의 선택기를 단일 선택기로 결합 할 수도 있습니다.

.article {
  color: #333
}
.article.popular {
  background: #DDD
}
.article .title {
  font-weight: bold
}

<:>가 생성됩니다 :

이 예제는 약간 과장된 것일 수 있지만이 기능의 힘을 매우 잘 보여줍니다. :-- 새로운 의사 클래스 Selector Level 4 사양은 많은 새로운 의사 클래스를 소개하지만 대부분의 의사 클래스의 동적 특성으로 인해 PostCSS 플러그인으로 몇 가지만 제공됩니다.

pseudoclass 플러그인은 새로운

pseudo 클래스를 구현합니다. 매개 변수의 선택기와 일치하는 요소 만 필터링하는 기능 클래스입니다. 여러 선택기를 통과하면 요소가 적어도 하나 이상 일치해야합니다. 요컨대 :

.article {
  color: #333;

  /* no nested-selector */
  .popular {
    background: #DDD;
  }

  /* the nested selector is not the fist selector in the chain */
  .latest & {
    border: 1px solid red;
  }
}

컴파일 :

.article {
  color: #333;

  @nest .latest & {
    border: 1px solid red;
  }
}

pseudoclass

주어진 매개 변수와 일치하지 않는 의사 클래스 필터링 요소. 플러그인에서 구현됩니다.

.article {
  color: #333
}
.latest .article {
  border: 1px solid red
}

<:> 결과는 다음과 같습니다

pseudoclass 플러그인은

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
  font-weight: bold;
}

pseudo 클래스를 구현합니다. 그것은

의사 클래스 주변의 혼란을 해결하는 데 도움이되었습니다. 후자와 달리 방문한 링크를 포함하여 모든 링크와 일치합니다.

컴파일 :

미디어 쿼리 개선

라이브러리에는 PostCSS를 위해 미디어 쿼리를보다 쉽게 ​​사용할 수 있도록 플러그인이 있습니다. 그들은 와

입니다. :matches()

커스텀 미디어 미디어 쿼리 작성은 일반 선택기와 동일한 문제를 만듭니다. 종종 스타일 시트에서 반복됩니다. 아마도 일반 선택기보다 자주 발생합니다. 다행히도 사용자 정의 선택기와 유사한 솔루션이 있습니다. 플러그인은 사용자 정의 미디어 쿼리 사양을 구현하여 미디어 쿼리를 변수에 저장하는 기능을 향상시킵니다.

구문은 사용자 정의 선택기와 매우 유사합니다. 간단한 예는 다음과 같습니다. postcss-selector-matches :matches() 컴파일 :

.article {
  color: #333;

  &.popular {
    background: #DDD;
  }

  & .title {
    font-weight: bold;
  }
}

물론 여러 사용자 정의 미디어 쿼리를 한 번에 사용할 수 있습니다.

<:>가 생성됩니다 :

보시다시피, "중간 뷰포트"의 정의를 변경하고 관련 CSS 코드를 찾는 것이 훨씬 쉽습니다.

.article {
  color: #333
}
.article.popular {
  background: #DDD
}
.article .title {
  font-weight: bold
}

최소 및 최대 구문 미디어 쿼리는 큰 일이지만 최소 및 최대 문법은 지역 사회로부터 많은 비판을 받았습니다. W3C는 비교 연산자를 사용하여보다 직관적 인 구문을 도입하여 응답합니다. 플러그인은 ,

,

, 에 대한 지원을 추가합니다. (기사의 나머지 부분은 기사의 길이로 인해 생략되었지만 이미지 링크는 변경되지 않았습니다)

위 내용은 선택기 및 미디어 쿼리 개선을위한 PostCS 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!