Sass를 사용하여 TailwindCSS 구축

2020년 CSS 상태 보고서에 따르면 Tailwind CSS는 만족도(86%)가 가장 높은 도구 중 하나였다.Tailwind는 웹 응용 프로그램을 구축하는 기존의 해결 방안이 되었다.다른 CSS 프레임워크(Bulma,bootstrap 등)와 달리 웹 사이트를 더 빨리 구축하고 발표할 수 있으며 100% 스타일을 제어할 수 있기 때문이다.
저는 Tailwind가 어떻게 3645.2kBCSS를 생성했는지 궁금했습니다. 이것은'p-0, mx-1...pt-40'부터 색 변체까지 다양한 실용류를 포함하고 있습니다.
이 블로그는 TailwindCSS 유틸리티 클래스를 아주 간단하게 구축하는 방법을 소개했지만, 플러그인/설정 생태계는 소개하지 않았다.
Sass(SCSS)나 문법적으로 훌륭한 스타일시트의 도움말 아래 구축할 것입니다.만약 네가 이것이 무엇인지 모른다면, 너는 이것video을 보고 개술을 얻을 수 있다.Sass를 사용하면 CSS 코드를 보다 효율적으로 작성할 수 있습니다.
간단한 프레젠테이션:

브라우저는 Sass가 실제로 무엇인지 이해하지 못하기 때문에, 우리는 그것을 CSS로 컴파일해야 한다.우리는 일련의 도구를 사용하여 이 점을 실현할 것이다.이제 우리의 프로젝트를 설정하기 시작합시다.

yarn init -y
# or
npm init -y

이것은 프로젝트를 위한 최소 package.json 파일을 만들 것입니다.지금 몇 가지 추가devDependencies

yarn add -D autoprefixer node-sass postcss postcss-cli
# or
npm install autoprefixer node-sass postcss postcss-cli --save-dev

다음은 실제 작동에 대한 간략한 설명입니다.

node-sass 도움말.scss / .sass 파일을 css로 컴파일하기

postcss 추상적인 문법 트리를 만들기 위해 CSS 코드를 표시하는 데 사용되는 문법 분석기

autoprefixerpostcss 플러그인, 공급업체 접두사를 CSS 규칙에 추가

현재, 우리는 package.json에 구축된 입력과 출력을 마음대로 수정할 수 있는 스크립트를 추가할 것입니다.

"scripts": {
    "build": "rm -rf build && yarn build-sass",
    "build-sass": "node-sass --output-style expanded src/index.scss ./build/index.css  && yarn  build-autoprefix",
    "build-autoprefix": "postcss --use autoprefixer --map --output ./build/index.css ./build/index.css"
}

build 생성 디렉토리를 지우고 실행build-sass

build-sass SCS를 컴파일하고 새 디렉터리에 css를 구축한 다음 실행build-autoprefix

build-autoprefix 공급업체 접두사 추가 및 소스 매핑 생성

현재 입력 파일 src/index.scss 을 만듭니다. 유효한 scss 코드를 작성하고 실행하면 yarn build 컴파일된 css가 생성된 것을 볼 수 있습니다.
현재 우리의 프로젝트는 이미 완성되었습니다. 우리는 창설text-color과background-color 변체의tailwind를 연구할 것입니다.기본 사상은 모든 색을 순환시키고 실용 프로그램 종류(text-gray-100, bg-gray-100 등)를 생성하는 것이다.
우선 새 디렉터리 utils 와 파일 _colors.scss 을 만듭니다.scss 파일에 전도 밑줄을 추가하면 partials 이라고 하는데, 이것은 모듈화 코드를 다른 파일로 가져오는 데 도움이 됩니다.
색상을 나타내기 위해 키 값 쌍을 나타내려면 SASS에서 제공한 Maps를 사용합니다.

// utils/_colors.scss
$colors: (
  'gray-100' #f7fafc,
  'gray-200' #edf2f7,
  'gray-300' #e2e8f0,
  'gray-400' #cbd5e0,
  'gray-500' #a0aec0,
  'gray-600' #718096,
  'gray-700' #4a5568,
  'gray-800' #2d3748,
  'gray-900' #1a202c
);

현재, 우리는 @each 규칙을 사용하여 이것들을 순환할 것이다. 이것은 우리가 목록/맵에 있는 모든 요소의 코드를 평가하여 중복된 양식을 생성하는 데 도움이 될 것이다. 이것이 바로 우리가 하고자 하는 일이다.

// utils/_colors.scss
@each $name, $hex in $colors {
  .text-#{$name} {
    color: $hex;
  }
  .bg-#{$name} {
    background-color: $hex;
  }
}

이제 이 부분을 입력 파일로 가져옵니다

// src/index.scss
@import '../utils/colors';

yarn build를 실행할 때 생성된 모든 유틸리티 클래스를 볼 수 있습니다.

/* build/index.css */
.text-gray-100 {
  color: #f7fafc;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.text-gray-200 {
  color: #edf2f7;
}

.bg-gray-200 {
  background-color: #edf2f7;
}

... and so on

다음에 우리는 margin,padding 실용 프로그램 종류를 어떻게 만드는지 연구할 것이다.이 예에서 우리는 lists 데이터 형식을 사용할 것이다.
먼저 새로운 부분_spacing.scss을 만듭니다. 두 개의 목록을 만듭니다. 첫 번째는 $spaces입니다. 간격을 계산하는 데 사용됩니다(예를 들어 m-4->margin:'1rem'), 두 번째는 $sides입니다. 기본적으로 margin-(정수리, 오른쪽, 왼쪽, 밑) 변체의 간격 방향을 만듭니다.

// utils/_spacing.scss
$spaces: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
  20;

$sides: 'top', 'right', 'bottom', 'left';

기왕 우리가 자신의 가치관을 가지게 된 이상 지금 우리가 해야 할 일은 @each 규칙의 도움 아래 그것들을 순환시키는 것이다.맨 위, 왼쪽, 맨 아래, 오른쪽 유틸리티 클래스를 생성하기 위해, 우리는 다른 @each 규칙을 끼워서 $sides 목록을 비추려고 합니다.우리는 또한 str-slice 문자열 세션을 되돌려 줍니다.

// utils/_spacing.scss
@each $space in $spaces {
  .m-#{$space} {
    margin: #{$space/4}rem;
  }

  .mx-#{$space} {
    margin-left: #{$space/4}rem;
    margin-right: #{$space/4}rem;
  }

  .my-#{$space} {
    margin-top: #{$space/4}rem;
    margin-bottom: #{$space/4}rem;
  }

  .px-#{$space} {
    padding-left: #{$space/4}rem;
    padding-right: #{$space/4}rem;
  }

  .py-#{$space} {
    padding-top: #{$space/4}rem;
    padding-bottom: #{$space/4}rem;
  }

  .p-#{$space} {
    padding: #{$space/4}rem;
  }

  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space/4}rem;
    }

    .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space/4}rem;
    }
  }
}

입력 파일의 일부분을 가져오는지 확인하십시오.

// src/index.scss
@import '../utils/colors' , '../utils/spacing';

현재, 그것을 구축하면 생성된 간격 변수를 볼 수 있습니다.

/* build/index.css */
.m-0 {
  margin: 0rem;
}

.p-0 {
  padding: 0rem;
}

.mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

... and so on

같은 방법으로 단점, 레이아웃, 그리고 원하는 유틸리티 종류를 만들 수 있습니다.나는 너희들이 이 문장의 내용이 풍부하다는 것을 발견할 수 있기를 바란다. 나는 이것이 충분히 쿨한 실현이고 여러분과 공유할 수 있다고 생각한다.
당신은 이 수첩Github repo의 코드를 참고할 수 있습니다.
당신의 생각을 알게 해 주십시오. 만약 당신에게 무슨 문제가 있으면 언제든지 저에게 연락 주십시오.건배!