PostCSS 기능을 사용하여 반응 형 워크 플로를 자동화합니다

이전에 RFS Mixin을 사용하여 반응 형 글꼴 크기를 자동화하는 방법을 설명한이 CSS- 트릭 기사를 읽었을 수도 있습니다. 최신 버전의 V9에서 RFS는 마진, 패딩, 테두리-라디우스 및 박스 쉐이드와 같은 모든 CSS 속성의 값 (PX 또는 Rem Units)의 값을 조정할 수 있습니다.

오늘날 우리는 PostCS 구현에 중점을 둘 것입니다. 먼저 NPM을 사용하여 RFS를 설치하십시오.

 NPM 설치 RFS

다음 단계는 PostCSS 플러그인 목록에 RFS를 추가하는 것입니다. postcss.config.js 파일을 사용하는 경우 AutoPrefixer와 같은 다른 PostCSS 플러그인 목록에 추가 할 수 있습니다.

 module.exports = {
  플러그인 : [
    필요 ( 'rfs'),
    require ( 'AutoPrefixer'),
  ]]
};

구성이 완료되면 사용자 정의 CS의 어느 곳에서나 rfs() 함수를 사용할 수 있습니다. 예를 들어 글꼴 크기가 반응이 되려면 다음과 같습니다.

 .제목 {
  글꼴 크기 : RFS (4REM);
}

… 또는 원하는 속성과 함께 사용하십시오.

 .card {
  배경색 : #fff;
  Border-Radius : RFS (4REM);
  Box-Shadow : RFS (0 0 2REM RGBA (0, 0, 0, .25));
  마진 : RFS (2REM);
  최대 width : 540px;
  패딩 : RFS (3REM);
}

위의 코드는 다음 CSS를 출력합니다.

 .card {
  배경색 : #fff;
  Border-Radius : calc (1.525rem 3.3vw);
  Box-Shadow : 0 CALC (1.325REM 0.9VW) RGBA (0, 0, 0, .25);
  마진 : calc (1.325rem 0.9VW);
  최대 width : 540px;
  패딩 : calc (1.425rem 2.1vw);
}

@Media (min-width : 1200px) {
  .card {
    Border-Radius : 4rem;
    Box-Shadow : 0 0 2REM RGBA (0, 0, 0, .25);
    여백 : 2REM;
    패딩 : 3REM;
  }
}

데모

다음은 작동 방식을 보여주는 예입니다. 데모 크기를 조정하여 부드러운 저장 효과를 볼 수 있습니다.

RFS가 CSS를 구문 분석하는 방법에 대해 자세히 알아보십시오

플러그인은 선언 된 값에서 rfs() 함수의 발생을 찾고 calc() 함수를 사용하여 기능을 유체 값으로 바꿉니다. 각 규칙 후에 RFS는 값이 너무 커지지 않도록 추가 CSS가 포함 된 미디어 쿼리를 생성합니다.

RFS는 선언에서 PX 및 REM 값 만 변환합니다. 다른 모든 값 (예 : EM 값, 숫자 또는 색상)은 무시됩니다. 이 기능은 다음과 같이 선언에서 여러 번 사용할 수 있습니다.

 Box-Shadow : 0 RFS (2REM) RFS (1.5REM) RGBA (0, 0, 255, .6);

RFS 및 사용자 정의 속성

 : 루트 {
  -타이틀-폰트 크기 : RFS (2.125REM);
  -카드 패딩 : RFS (3REM);
  -카드 마진 : RFS (2REM);
  -Card-Border-Radius : RFS (4REM);
  -Card-Box-Shadow : RFS (0 0 2REM RGBA (0, 0, 0, .25));
}

이러한 변수는 CSS의 뒷부분에서 사용할 수 있습니다.

 .card {
  최대 width : 540px;
  패딩 : var (-카드 패딩);
  마진 : var (-Card-margin);
  배경색 : #fff;
  Box-Shadow : var (-Card-Box-Shadow);
  Border-Radius : var (-Card-Vorder-Radius);
}

이 업데이트가 직장에서 유용하다는 것을 알게되기를 바랍니다. 질문이나 피드백이 있으시면 의견을 남겨주세요!

위 내용은 PostCSS 기능을 사용하여 반응 형 워크 플로를 자동화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!