vanilla extract 다운로드 - vanilla extract 소스 코드 다운로드

vanilla extract

기타 소스코드

vanilla-extract

다운로드

? 바닐라 추출

제로 러티 타임 스타일 시트-유형의 스크립트.

로컬로 스코핑 된 클래스 이름 및 CSS 변수로 Styles를 TypeScript (또는 JavaScript)로 작성한 다음 빌드 시간에 정적 CSS 파일을 생성하십시오.

기본적으로 "CSS 모듈-유형 스크립트"이지만 CSS 변수 + 더 많은 범위가 있습니다.

빌드 타임에 생성 된 모든 스타일 - Sass, Less 등과 마찬가지로.

표준 CSS에 대한 최소 추상화.

? 프론트 엔드 프레임 워크와 함께 또는 심지어 하나없이 작동합니다.

? CSS 모듈과 마찬가지로 로컬 스코프 클래스 이름.

로컬로 범위를 가진 CSS 변수, @keyframes 및 @font-face 규칙.

? 동시 테마를 지원하는 고급 테마 시스템. 글로벌이 없습니다!

? 가변 기반 calc 표현을 생성하기위한 도구.

? CSSTYPE를 통한 유형 안전 스타일.

? run 대추킬 개발 및 테스트를위한 옵션 런타임 버전.

? 동적 런타임 테마를위한 옵션 API.

설정 가이드, 예제 및 API 문서는 문서 사이트를 확인하십시오.

? Codesandbox에서 직접 사용해보십시오.

.css.ts 파일에 스타일을 작성하십시오.

 // styles.css.ts

import { createTheme , style } from '@vanilla-extract/css' ;

export const [ themeClass , vars ] = createTheme ( {
  color : {
    brand : 'blue'
  } ,
  font : {
    body : 'arial'
  }
} ) ;

export const exampleStyle = style ( {
  backgroundColor : vars . color . brand ,
  fontFamily : vars . font . body ,
  color : 'white' ,
  padding : 10
} ) ;

빌드 툴링을 구성하면이 .css.ts 파일은 빌드 시간에 평가됩니다. 이 파일의 코드 중 어느 것도 최종 번들에 포함되지 않습니다. Sass, Less 등 대신 전처리기로 TypeScript를 사용하는 것으로 생각하십시오.

그런 다음 마크 업에 소비하십시오.

 // app.ts

import { themeClass , exampleStyle } from './styles.css.ts' ;

document . write ( `
  <section class=" ${ themeClass } ">
    <h1 class=" ${ exampleStyle } ">Hello world!</h1>
  </section>
` ) ;