바닐라 추출 : 새로운 프레임 워크 유형의 스크립트 라이브러리. 스타일을 작성하는 가볍고 강력하며 직관적 인 방법을 제공합니다. 바닐라 추출은 필수 CSS 프레임 워크가 아니라 유연한 개발자 도구입니다. 최근 몇 년 동안 CSS 도구 필드는 PostCS, SASS, CSS 모듈 및 스타일 경쟁자와 같은 도구가 2017 년 이전에 나타나고 있으며 오늘날에도 여전히 인기가 있습니다. Tailwind는 최근 몇 년 동안 CSS 도구 필드의 변화를 가져온 몇 안되는 도구 중 하나입니다.
바닐라 추출은 변화를 다시 트리거하는 것을 목표로합니다. 올해 출시되었으며 다음을 포함한 최신 트렌드의 혜택을 받았습니다.
바닐라 추출에는 영리한 혁신이 많이 있으며, 이는 의미가 있다고 생각합니다.
CSS-in-JS 라이브러리는 일반적으로 런타임에 문서에 스타일을 주입합니다. 이것은 중요한 CSS 추출 및 동적 스타일을 포함한 몇 가지 이점이 있습니다.
그러나 일반적으로 개별 CSS 파일이 더 잘 수행됩니다. 이는 JavaScript 코드가 더 비싼 구문 분석/컴파일 프로세스를 거쳐야하는 반면 별도의 CSS 파일을 캐시 할 수있는 반면 HTTP2 프로토콜은 추가 요청 비용을 줄입니다. 또한 이제 많은 동적 스타일을 위해 사용자 정의 속성을 무료로 제공합니다.
따라서 바닐라 추출은 런타임에 스타일을 주입하는 대신 Linaria와 Astroturf를 따릅니다. 이 라이브러리를 사용하면 빌드 시간에 추출되어 CSS 파일을 빌드하는 데 사용되는 JavaScript 기능을 사용하여 스타일을 유지할 수 있습니다. TypeScript를 사용하여 Vanilla-Extract를 작성하지만 프로덕션 JavaScript 패키지의 전체 크기에는 영향을 미치지 않습니다.
바닐라 추출의 위대한 가치 제안 중 하나는 유형 확인을 제공한다는 것입니다. Codebase 유형을 안전하게 유지하는 것이 매우 중요하다면 스타일도 동일하게하지 않겠습니까?
TypeScript는 많은 이점을 제공합니다. 첫 번째는 자동 완료입니다. TypeScript를 지원하는 편집기에 "fo"를 입력하면 선택할 수있는 글꼴 옵션 (FontFamily, FontKerning, Fontweight 또는 기타 경기)이있는 드롭 다운 목록이 표시됩니다. 이로 인해 CSS 속성은 편집자의 편의를 통해 쉽게 발견 할 수 있습니다. fontvariant의 이름을 기억하지 못하지만 "font"로 시작한다는 것을 알고 있다면 입력하고 옵션을 스크롤 할 수 있습니다. VS 코드에서는이를 달성하기 위해 추가 도구를 다운로드 할 필요가 없습니다.
이것은 스타일의 글쓰기 속도를 크게 높입니다.
이것은 또한 편집자가 항상 당신을 모니터링하여 좌절하는 버그로 이어질 수있는 철자 오류를 만들지 않도록합니다.
바닐라 추출 유형은 또한 구문 해석 및 유형 정의에서 편집하는 CSS 속성에 대한 MDN 문서에 대한 링크를 제공합니다. 이렇게하면 스타일이 비정상적으로 작동 할 때 Crazy Google 검색의 단계를 저장합니다.
TypeScript로 쓰면 Camel Nomenclature를 사용하여 BackgroundColor와 같은 CSS 속성을 나타냅니다. 이를 위해서는 배경색과 같은 일반 CSS 구문을 사용하는 데 익숙한 개발자에게는 몇 가지 변경이 필요할 수 있습니다.
Vanilla-Extract는 모든 최신 포장 도구에 대한 1 자 통합을 제공합니다. 다음은 현재 지원하는 전체 통합 목록입니다.
또한 프레임 워크와 관련이 없습니다. 빌드 시점에 문자열로 변환되는 바닐라 출입에서 클래스 이름을 가져옵니다.
Vanilla-Extract를 사용하려면 구성 요소가 가져올 수있는 .css.ts 파일을 작성할 수 있습니다. 이 기능에 대한 호출은 빌드 단계에서 해시 및 스코프 클래스 이름 문자열로 변환됩니다. 이것은 CSS 모듈과 유사하게 들릴 수 있으며 우연의 일치가 아닙니다. 바닐라 출입의 제작자 중 하나 인 Mark Dalgleish는 또한 CSS 모듈의 공동 제작자입니다.
style() 함수 style() 함수를 사용하여 자동으로 스코핑 된 CSS 클래스를 만들 수 있습니다. 요소 스타일을 전달한 다음 반환 값을 내 보냅니다. 사용자 코드 어딘가에이 값을 가져 오면 SCOPE 클래스 이름으로 변환됩니다.
// title.css.ts
"@vanilla-extract/css"에서 {style} 가져 오기;
내보내기 const titlestyle = 스타일 ({{
BuckgrendColor : "HSL (210deg, 30%, 90%)",
Fontfamily : "Helvetica, sans-serif",
색상 : "HSL (210deg, 60%, 25%)",
패딩 : 30,
Borderradius : 20,
}); // title.ts
"./title.css"에서 {titlestyle} 가져 오기;
document.getElementById ( "root"). innerHtml =`<h1> 바닐라 추출물</h1> `;;미디어 쿼리 및 의사 선택자도 스타일 선언에 포함될 수 있습니다.
// title.css.ts
BuckgrendColor : "HSL (210deg, 30%, 90%)",
Fontfamily : "Helvetica, sans-serif",
색상 : "HSL (210deg, 60%, 25%)",
패딩 : 30,
Borderradius : 20,
"@Media": {
"스크린 및 (최대 세포 : 700px)": {
패딩 : 10
}
},
": 호버": {
BuckgrendColor : "HSL (210deg, 70%, 80%)"
} 이러한 style 함수 호출은 CSS의 가벼운 추상화입니다. 모든 속성 이름과 값은 익숙한 CSS 속성 및 값에 매핑됩니다. 익숙해지기 위해 한 가지 변경 사항은 값을 숫자 (예 : 패딩 : 30), 픽셀 단위 값으로 기본값으로 선언 할 수 있으며, 일부 값은 문자열로 선언해야한다는 것입니다 (예 : 패딩 : "10px 20px 15px 15px").
style 기능의 속성은 단일 HTML 노드에만 영향을 줄 수 있습니다. 즉, Sass 또는 PostCS에 익숙 할 수있는 요소 자식 요소의 스타일을 선언하기 위해 Nesting을 사용하지 못한다는 것을 의미합니다. 대신 아동 요소를 별도로 스타일링해야합니다. 자식 요소가 상위 요소의 다른 스타일을 기반으로 해야하는 경우, selectors 속성을 사용하여 부모 요소에 의존하는 스타일을 추가 할 수 있습니다.
// title.css.ts
내보내기 const innerspan = 스타일 ({
선택기 : {[`$ {titlestyle} &`] : {
색상 : "HSL (190deg, 90%, 25%)",
FontStyle : "Italic",
TextDecoration : "밑줄"
}}
}); // title.ts
"./title.css"에서 {titlestyle, innerspan} import;
document.getElementById ( "root"). innerHtml =
`<h1> 바닐라 추출물</h1>
끊임없는`;또는 주제 API (다음에 대해 이야기 할)를 사용하여 자식 노드에서 사용하는 부모 요소에서 사용자 정의 속성을 만들 수 있습니다. 이것은 엄격하게 들릴지 모르지만 의도적으로 대형 코드베이스의 유지 보수 가능성을 향상 시키도록 설계되었습니다. 즉, 프로젝트의 각 요소의 스타일이 어디에 있는지 정확히 알 수 있습니다.
createTheme 함수를 사용하여 TypeScript 객체에서 변수를 빌드 할 수 있습니다.
// title.css.ts
"@vanilla-extract/css"에서 {style, createtheme} 가져 오기;
// 테마 내보내기 const [maintheme, vars] = createTheme ({{
색상:{
텍스트 : "HSL (210deg, 60%, 25%)",
배경 : "HSL (210deg, 30%, 90%)"
},
길이 : {
mediumgap : "30px"
}
})
// 주제 내보내기 const titlestyle = style ({{
BackgroundColor : vars.color.background,
색상 : vars.color.text,
Fontfamily : "Helvetica, sans-serif",
패딩 : vars.lengths.mediumgap,
Borderradius : 20,
});그런 다음 바닐라 추출을 통해 테마의 변형을 만들 수 있습니다. TypeScript는 변형이 동일한 속성 이름을 사용하도록하는 데 도움이되므로 주제에 배경 속성을 추가하는 것을 잊어 버리면 경고가 나타납니다.
일반 테마와 다크 모드를 만드는 방법은 다음과 같습니다.
// title.css.ts
"@vanilla-extract/css"에서 {style, createtheme} 가져 오기;
내보내기 const [maintheme, vars] = createTheme ({{
색상:{
텍스트 : "HSL (210deg, 60%, 25%)",
배경 : "HSL (210deg, 30%, 90%)"
},
길이 : {
mediumgap : "30px"
}
})
// 테마 변형 -이 부분은 배열 구문 내보내기 Const DarkMode = createTheme (vars, {
색상:{
텍스트 : "HSL (210deg, 60%, 80%)",
배경 : "HSL (210deg, 30%, 7%)",
},
길이 : {
mediumgap : "30px"
}
})
// 주제 내보내기 const titlestyle = style ({{
BackgroundColor : vars.color.background,
색상 : vars.color.text,
Fontfamily : "Helvetica, sans-serif",
패딩 : vars.lengths.mediumgap,
Borderradius : 20,
});그런 다음 JavaScript를 사용하면 바닐라 출입이 주제를 전환하기 위해 반환 한 클래스 이름을 동적으로 적용 할 수 있습니다.
// title.ts
"./title.css"에서 {titlestyle, maintheme, darkmode} import;
document.getElementById ( "root"). innerHtml =
`<div>
<h1>바닐라 추출물</h1>
다크 모드
</div>` 이것은 바닥에서 어떻게 작동합니까? createTheme 함수에서 선언하는 객체는 요소 클래스에 첨부 된 CSS 사용자 정의 속성으로 변환됩니다. 이러한 사용자 정의 속성은 충돌을 방지하기 위해 해시됩니다. mainTheme 예제의 출력 CSS는 다음과 같습니다.
.src__ohrzop0 {
-Color-Brand__OHRZOP1 : HSL (210deg, 80%, 25%);
-Color-Text__OHRZOP2 : HSL (210deg, 60%, 25%);
-Color-Background__ohrzop3 : HSL (210deg, 30%, 90%);
-lengths-mediumgap__ohrzop4 : 30px;
} 그리고 darkMode 테마의 CSS 출력은 다음과 같습니다.
.src__ohrzop5 {
-Color-Brand__ohrzop1 : HSL (210deg, 80%, 60%);
-Color-Text__OHRZOP2 : HSL (210deg, 60%, 80%);
-Color-Background__ohrzop3 : HSL (210deg, 30%, 10%);
-lengths-mediumgap__ohrzop4 : 30px;
} 따라서 사용자 코드에서 클래스 이름을 변경하면됩니다. 부모 요소에 darkmode 클래스 이름을 적용하면 mainTheme 사용자 정의 속성이 darkMode 사용자 정의 속성으로 대체됩니다.
style 과 createTheme 함수는 웹 사이트를 스스로 스타일링하기에 충분하지만 바닐라 추출은 재사용 가능성을 향상시키기위한 추가 API를 제공합니다. 레시피 API를 사용하면 태그 나 사용자 코드에서 선택할 수있는 요소에 대한 많은 변형을 만들 수 있습니다.
먼저 별도로 설치해야합니다.
npm install @vanilla-extract/레시피
작동 방식은 다음과 같습니다. recipe 함수를 가져 와서 base 및 variants 속성이 포함 된 객체를 전달합니다.
// button.css.ts
'@vanilla-extract/recipes'에서 {recipe} 가져 오기;
내보내기 const buttonstyles = 레시피 ({
베이스:{
// 모든 버튼에 적용되는 스타일이 여기에 배치됩니다},
변형 : {
// 우리가 여기에서 선택한 스타일}
}); base 에서는 모든 변형에 적용될 스타일을 선언 할 수 있습니다. variants 에서는 요소를 사용자 정의하는 다양한 방법을 제공 할 수 있습니다.
// button.css.ts
'@vanilla-extract/recipes'에서 {recipe} 가져 오기;
내보내기 const buttonstyles = 레시피 ({
기본 : {
Fontweight : "Bold",
},
변형 : {
색상: {
정상: {
BuckgrendColor : "HSL (210deg, 30%, 90%)",
},
Calltoaction : {
BackgroundColor : "HSL (210deg, 80%, 65%)",
},
},
크기 : {
크기가 큰: {
패딩 : 30,
},
중간: {
패딩 : 15,
},
},
},
});그런 다음 태그에서 사용하려는 변형을 선언 할 수 있습니다.
// button.ts
"./button.css"에서 {buttonstyles} 가져 오기;
나를 클릭하십시오Vanilla-Extract는 TypeScript가있는 자신의 변형 이름에 대한 자동 완료를 제공합니다!
원하는대로 변형 이름을 지정하고 원하는 속성을 넣을 수 있습니다.
// button.css.ts
내보내기 const buttonstyles = 레시피 ({
변형 : {
동물: {
개: {
배경 지식 : 'url ( "./ dog.png")',
},
고양이: {
배경 지식 : 'url ( "./ cat.png")',
},
토끼: {
배경 지식 : 'url ( "./ rabbit.png")',
},
},
},
});재사용 가능한 구성 요소를 만들고 변화 방식을 제어 할 수 있기 때문에 디자인 시스템을 구축하는 데 매우 유용하다는 것을 알 수 있습니다. 이러한 변경 사항은 TypeScript에서 쉽게 발견하기가 쉽습니다. CMD/CTRL 공간 (대부분의 편집자)을 입력하면 구성 요소를 사용자 정의 할 수있는 다양한 방법을 나열하는 드롭 다운 목록이 표시됩니다.
Sprinkles는 바닐라 추출을 기반으로 한 실용적인 우선 순위 프레임 워크입니다. 바닐라 추출 문서는 다음과 같이 설명합니다.
기본적으로, 그것은 자신의 버전의 제로 런타임, 타입 안전 테일 윈드, 스타일 시스템 등을 구축하는 것과 같습니다.
따라서 이름 지정을 좋아하지 않는다면 (우리 모두는 악몽이 있고, 외부 래퍼 디브를 만들고, 외부 외부 래퍼로 랩핑해야한다는 것을 깨달았을 때, 스프링클은 바닐라 추출을 사용하는 것이 선호되는 방법 일 수 있습니다.
스프링클 API도 별도로 설치해야합니다.
NPM @vanilla-extract/sprinkles install
이제 실제 기능을 사용할 수있는 빌딩 블록을 만들 수 있습니다. 여러 객체를 선언하여 색상과 길이 목록을 만들어 봅시다. JavaScript 키 이름은 우리가 원하는 것이 될 수 있습니다. 값은 사용하려는 CSS 속성에 대한 유효한 CSS 값이어야합니다.
// sprinkles.css.ts
const colors = {
Blue100 : "HSL (210deg, 70%, 15%)",
Blue200 : "HSL (210deg, 60%, 25%)",
Blue300 : "HSL (210deg, 55%, 35%)",
Blue400 : "HSL (210deg, 50%, 45%)",
Blue500 : "HSL (210deg, 45%, 55%)",
Blue600 : "HSL (210deg, 50%, 65%)",
Blue700 : "HSL (207deg, 55%, 75%)",
Blue800 : "HSL (205deg, 60%, 80%)",
Blue900 : "HSL (203deg, 70%, 85%)",
};
const 길이 = {
작은 : "4px",
매체 : "8px",
큰 : "16px",
Humungous : "64px"
}; defineProperties 함수를 사용하여 어떤 CSS 속성을 선언 할 수 있습니다.
properties 속성이 포함 된 객체를 전달하십시오.properties 에서는 키가 사용자가 설정할 수있는 CSS 속성 인 객체를 선언합니다 (유효한 CSS 속성이어야 함). 값은 이전에 만든 객체 (색상 및 길이 목록)입니다. // sprinkles.css.ts
"@vanilla-extract/sprinkles"에서 {defineProperties} 가져 오기;
const colors = {
Blue100 : "HSL (210deg, 70%, 15%)"
// 등.
}
const 길이 = {
작은 : "4px",
// 등.
}
const 속성 = DefineProperties ({
속성: {
//이 객체의 키는 유효한 CSS 속성이어야합니다. // 값은 사용자 색상에 제공하는 옵션입니다 : 색상,
BackgroundColor : 색상,
패딩 : 길이,
},
}); 마지막 단계는 defineProperties 의 반환 값을 createSprinkles 함수로 전달하고 반환 값을 내보내는 것입니다.
// sprinkles.css.ts
"@vanilla-extract/sprinkles"에서 import {defineProperties, createSprinkles};
const colors = {
Blue100 : "HSL (210deg, 70%, 15%)"
// 등.
}
const 길이 = {
작은 : "4px",
// 등.
}
const 속성 = DefineProperties ({
속성: {
색상 : 색상,
// 등.
},
});
내보내기 const springles = createSprinkles (속성); 그런 다음 class 속성에서 sprinkles 함수를 호출하고 각 요소에 대해 원하는 옵션을 선택하여 구성 요소 내에서 인라인 스타일을 시작할 수 있습니다.
// index.ts
"./sprinkles.css"에서 {Sprinkles} 가져 오기;
document.getElementById ( "root"). innerHtml =`클릭하십시오
`;;JavaScript 출력은 각 스타일 속성에 대한 클래스 이름 문자열을 저장합니다. 이 클래스 이름은 출력 CSS 파일의 단일 규칙과 일치합니다.
나를 클릭하십시오
보시다시피,이 API를 사용하면 사전 정의 된 제약 세트를 사용하여 태그 내에서 요소를 스타일링 할 수 있습니다. 또한 각 요소의 클래스 이름을 제시하는 어려운 작업을 피할 수 있습니다. 그 결과 Tailwind와 매우 유사한 느낌이 들지만 TypeScript 주위에 구축 된 모든 인프라의 이점도 있습니다.
Sprinkles API를 사용하면 조건과 약어를 작성하여 유틸리티 클래스를 사용하여 반응 형 스타일을 만들 수 있습니다.
바닐라 추출은 CSS 도구 분야에서 큰 발전처럼 느껴집니다. 정적 타이핑이 제공하는 모든 기능을 활용하는 직관적이고 강력한 스타일 솔루션으로 구축하는 데 많은 생각이 투자되었습니다.
이 개정 된 출력은 다른 문구와 문장 구조를 사용하면서 원래의 의미를 유지합니다.
위 내용은 Vanilla-Extract가있는 TypeScript의 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
