Hướng dẫn css-in-js typescript - bảng chữ css-in-js

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Vanilla-Extract là một thư viện CSS-in-Typescript mới của khung. Nó là một cách nhẹ, mạnh mẽ và trực quan để viết phong cách của bạn. Vanilla-Extract không phải là một khung CSS theo quy định, nhưng là một phần công cụ phát triển linh hoạt. Công cụ CSS là một không gian tương đối ổn định trong vài năm qua với các mô-đun Postcss, SASS, CSS và các thành phần kiểu dáng được sắp ra mắt trước năm 2017 (một số từ lâu trước đó) và chúng vẫn còn phổ biến ngày hôm nay. Tailwind là một trong một vài công cụ đã làm mọi thứ rung động trong công cụ CSS trong vài năm qua.

Vanilla-Extract nhằm mục đích làm rung chuyển mọi thứ một lần nữa. Nó đã được phát hành trong năm nay và có lợi ích là có thể tận dụng một số xu hướng gần đây, bao gồm:

• Nhà phát triển JavaScript chuyển sang TypeScript
• Hỗ trợ trình duyệt cho các thuộc tính tùy chỉnh CSS
• Kiểu dáng đầu tiên tiện ích

Có một loạt các đổi mới thông minh trong Vanilla-Extract mà tôi nghĩ làm cho nó trở thành một vấn đề lớn.

Không chạy bằng không

Các thư viện CSS-in-JS thường đưa các kiểu vào tài liệu vào thời gian chạy. Điều này có lợi ích, bao gồm trích xuất CSS quan trọng và kiểu dáng năng động.

Nhưng như một nguyên tắc chung, một tệp CSS riêng biệt sẽ có hiệu suất hơn. Điều đó bởi vì mã JavaScript cần phải thông qua phân tích/biên dịch đắt tiền hơn, trong khi một tệp CSS riêng biệt có thể được lưu trữ trong khi giao thức HTTP2 làm giảm chi phí của yêu cầu thêm. Ngoài ra, các thuộc tính tùy chỉnh hiện có thể cung cấp rất nhiều kiểu dáng năng động miễn phí.

Vì vậy, thay vì tiêm các kiểu vào thời gian chạy, Vanilla-Extract nhận được sau Linaria và Astroturf. Các thư viện này cho phép bạn các kiểu tác giả sử dụng các chức năng JavaScript bị xé toạc vào thời điểm xây dựng và được sử dụng để xây dựng tệp CSS. Mặc dù bạn viết Vanilla-Extract trong TypeScript, nhưng nó không ảnh hưởng đến kích thước tổng thể của gói JavaScript sản xuất của bạn.

TYPEXTRIPT

Một đề xuất giá trị chiết xuất vani lớn là bạn nhận được gõ. Nếu nó đủ quan trọng để giữ phần còn lại của loại mã hóa an toàn, thì tại sao không làm điều tương tự với kiểu của bạn?

TypeScript cung cấp một số lợi ích. Đầu tiên, có tự động hoàn thành. Nếu bạn gõ vào FO FO thì trong một trình soạn thảo thân thiện với TypeScript, bạn sẽ nhận được một danh sách các tùy chọn phông chữ trong một lần thả xuống-

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

1,

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

2,

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

3 hoặc bất cứ điều gì khác phù hợp-để chọn. Điều này làm cho các thuộc tính CSS có thể phát hiện được từ sự thoải mái của biên tập viên của bạn. Nếu bạn có thể nhớ tên của

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

4 nhưng hãy biết nó sẽ bắt đầu với từ ngữ phông chữ, bạn sẽ nhập nó và cuộn qua các tùy chọn. Trong mã VS, bạn không cần tải xuống bất kỳ công cụ bổ sung nào để điều này xảy ra.

Điều này thực sự làm tăng tốc độ tác giả của Styles:

Điều đó cũng có nghĩa là biên tập viên của bạn đang theo dõi vai của bạn để đảm bảo rằng bạn không mắc phải bất kỳ lỗi chính tả nào có thể gây ra lỗi gây khó chịu.

Các loại Vanilla-Extract cũng cung cấp một lời giải thích về cú pháp trong định nghĩa loại của chúng và liên kết đến tài liệu MDN cho thuộc tính CSS mà bạn chỉnh sửa. Điều này loại bỏ một bước điên cuồng googling khi các kiểu hành xử bất ngờ.

Viết bằng TypeScript có nghĩa là bạn sử dụng tên trường hợp lạc đà cho các thuộc tính CSS, như

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

5. Đây có thể là một chút thay đổi cho các nhà phát triển được sử dụng cú pháp CSS thông thường, như

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

6.

Tích hợp

Vanilla-Extract cung cấp các tích hợp hạng nhất cho tất cả các gói mới nhất. Tại đây, một danh sách đầy đủ các tích hợp mà nó hiện đang hỗ trợ:

• trang web
• Xây dựng
• Vite
• Snowpack
• NextJS
• Gatsby

Nó cũng hoàn toàn không phải là khuôn khổ. Tất cả những gì bạn cần làm là nhập tên lớp từ Vanilla-Extract, được chuyển đổi thành một chuỗi vào thời điểm xây dựng.

Cách sử dụng

Để sử dụng Vanilla-Extract, bạn viết một tệp

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

7 mà các thành phần của bạn có thể nhập. Các cuộc gọi đến các chức năng này được chuyển đổi thành chuỗi tên lớp băm và phạm vi trong bước xây dựng. Điều này nghe có vẻ tương tự như các mô-đun CSS, và đây không phải là sự trùng hợp: một trong những người tạo ra Vanilla-Extract, Mark Dalgleish, cũng là người đồng sáng tạo các mô-đun CSS.

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

8

Bạn có thể tạo một lớp CSS tự động bằng cách sử dụng hàm

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

8. Bạn vượt qua các kiểu phần tử, sau đó xuất giá trị trả về. Nhập giá trị này ở đâu đó trong mã người dùng của bạn và nó đã chuyển đổi thành một tên lớp phạm vi.

// title.css.ts
import {style} from "@vanilla-extract/css";

export const titleStyle = style({
  backgroundColor: "hsl(210deg,30%,90%)",
  fontFamily: "helvetica, Sans-Serif",
  color: "hsl(210deg,60%,25%)",
  padding: 30,
  borderRadius: 20,
});

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

Truy vấn truyền thông và bộ chọn giả cũng có thể được bao gồm các khai báo kiểu bên trong:

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

Các cuộc gọi chức năng

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

0 này là một sự trừu tượng hóa mỏng so với CSS - tất cả các tên và giá trị thuộc tính Bản đồ theo các thuộc tính CSS và giá trị mà bạn đã quen thuộc. Một thay đổi để làm quen là các giá trị đôi khi có thể được khai báo là một số (ví dụ:

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

1) mặc định là giá trị đơn vị pixel, trong khi một số giá trị cần được khai báo là một chuỗi (ví dụ:

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

2).

Các thuộc tính đi vào bên trong hàm kiểu chỉ có thể ảnh hưởng đến một nút HTML duy nhất. Điều này có nghĩa là bạn có thể sử dụng làm tổ để khai báo các kiểu cho trẻ em của một yếu tố - thứ mà bạn có thể quen trong SASS hoặc Postcss. Thay vào đó, bạn cần tạo kiểu trẻ em riêng biệt. Nếu một phần tử con cần các kiểu khác nhau dựa trên cha mẹ, bạn có thể sử dụng thuộc tính

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

3 để thêm các kiểu phụ thuộc vào cha mẹ:

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

Hoặc bạn cũng có thể sử dụng API theo chủ đề (mà chúng tôi sẽ nhận được tiếp theo) để tạo các thuộc tính tùy chỉnh trong phần tử cha được tiêu thụ bởi các nút con. Điều này nghe có vẻ hạn chế, nhưng nó cố tình bị bỏ lại theo cách này để tăng khả năng duy trì trong các cơ sở mã lớn hơn. Điều đó có nghĩa là bạn sẽ biết chính xác nơi các kiểu đã được khai báo cho từng yếu tố trong dự án của bạn.

Theo chủ đề

Bạn có thể sử dụng chức năng

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

4 để xây dựng các biến trong đối tượng TypeScript:

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

// Creating the theme
export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})

// Using the theme
export const titleStyle = style({
  backgroundColor:vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

Sau đó, Vanilla-Extract cho phép bạn tạo ra một biến thể của chủ đề của bạn. TypeScript giúp nó đảm bảo rằng biến thể của bạn sử dụng tất cả các tên thuộc tính giống nhau, vì vậy bạn sẽ nhận được cảnh báo nếu bạn quên thêm thuộc tính

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

5 vào chủ đề.

Đây là cách bạn có thể tạo một chủ đề thông thường và chế độ tối:

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})
// Theme variant - note this part does not use the array syntax
export const darkMode = createTheme(vars,{
  color:{
    text:"hsl(210deg,60%,80%)",
    background: "hsl(210deg,30%,7%)",
  },
  lengths:{
    mediumGap: "30px"
  }
})
// Consuming the theme 
export const titleStyle = style({
  backgroundColor: vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

Sau đó, bằng cách sử dụng JavaScript, bạn có thể tự động áp dụng các tên lớp được trả lại bởi Vanilla-Extract để chuyển chủ đề:

// title.ts
import {titleStyle,mainTheme,darkMode} from "./title.css";

document.getElementById("root").innerHTML = 
`

  
Vanilla Extract
  Dark mode
`

Làm thế nào điều này hoạt động dưới mui xe? Các đối tượng bạn khai báo trong hàm

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

4 được biến thành các thuộc tính tùy chỉnh CSS được gắn vào lớp phần tử. Các thuộc tính tùy chỉnh này được băm để ngăn chặn xung đột. CSS đầu ra cho ví dụ

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

7 của chúng tôi trông như thế này:

.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;
}

Và đầu ra CSS của chủ đề

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

8 của chúng tôi trông như thế này:

.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;
}

Vì vậy, tất cả những gì chúng ta cần thay đổi trong mã người dùng của chúng tôi là tên lớp. Áp dụng tên lớp

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

9 cho phần tử cha và các thuộc tính tùy chỉnh

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

7 được hoán đổi cho các thuộc tính

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

8.

API công thức nấu ăn

Các chức năng

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

0 và

// title.css.ts
export const innerSpan = style({
  selectors:{[`${titleStyle} &`]:{
    color: "hsl(190deg,90%,25%)",
    fontStyle: "italic",
    textDecoration: "underline"
  }}
});

4 cung cấp đủ năng lượng để tự mình tạo kiểu trang web, nhưng Vanilla-Extract cung cấp thêm một vài API để thúc đẩy khả năng tái sử dụng. API công thức nấu ăn cho phép bạn tạo một loạt các biến thể cho một phần tử mà bạn có thể chọn trong mã đánh dấu hoặc mã người dùng của mình.

Đầu tiên, nó cần được cài đặt riêng:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

0

Ở đây, cách thức hoạt động của nó. Bạn nhập chức năng

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

4 và chuyển vào một đối tượng với các thuộc tính

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

5 và

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

6:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

1

Bên trong

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

5, bạn có thể khai báo các kiểu sẽ được áp dụng cho tất cả các biến thể. Bên trong

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

6, bạn có thể cung cấp các cách khác nhau để tùy chỉnh phần tử:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

2

Sau đó, bạn có thể khai báo biến thể bạn muốn sử dụng trong đánh dấu:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

3

Và Vanilla-Extract tận dụng TypeScript cho tự động hoàn thành cho các tên biến thể của riêng bạn!

Bạn có thể đặt tên cho các biến thể của bạn bất cứ điều gì bạn thích và đặt bất kỳ thuộc tính nào bạn muốn vào chúng, như vậy:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

4

Bạn có thể thấy điều này sẽ vô cùng hữu ích để xây dựng một hệ thống thiết kế, vì bạn có thể tạo các thành phần có thể tái sử dụng và kiểm soát các cách chúng khác nhau. Các biến thể này có thể dễ dàng phát hiện với TypeScript - tất cả những gì bạn cần gõ là

// title.ts
import {titleStyle,innerSpan} from "./title.css";
document.getElementById("root").innerHTML = 
`
Vanilla Extract
Unstyled`;

9 (trên hầu hết các trình soạn thảo) và bạn nhận được một danh sách thả xuống các cách khác nhau để tùy chỉnh thành phần của mình.

Tiện ích đầu tiên với rắc

Sprinkles là một khung công tác đầu tiên tiện ích được xây dựng trên đỉnh của vani. Đây là cách các tài liệu chiết xuất vani mô tả nó:

Về cơ bản, nó giống như xây dựng phiên bản không có thời gian, kiểu đuôi của riêng bạn, hệ thống kiểu dáng, v.v.

Vì vậy, nếu bạn không phải là một fan hâm mộ của việc đặt tên cho mọi thứ (tất cả chúng ta đều có những cơn ác mộng tạo ra một div

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

// Creating the theme
export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})

// Using the theme
export const titleStyle = style({
  backgroundColor:vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

0 thì nhận ra chúng ta cần phải bọc nó bằng một.

API rắc cũng cần được cài đặt riêng:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

5

Bây giờ chúng tôi có thể tạo một số khối xây dựng cho các chức năng tiện ích của chúng tôi để sử dụng. Hãy để tạo ra một danh sách các màu sắc và độ dài bằng cách khai báo một vài đối tượng. Tên khóa JavaScript có thể là bất cứ điều gì chúng ta muốn. Các giá trị sẽ cần phải là giá trị CSS hợp lệ cho các thuộc tính CSS mà chúng tôi dự định sử dụng chúng cho:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

6

Chúng ta có thể khai báo các thuộc tính CSS nào các giá trị này sẽ được áp dụng bằng cách sử dụng hàm

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

// Creating the theme
export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})

// Using the theme
export const titleStyle = style({
  backgroundColor:vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

2:

• Vượt qua nó một đối tượng với một thuộc tính

  // title.css.ts
  import {style,createTheme } from "@vanilla-extract/css";
  
  // Creating the theme
  export const [mainTheme,vars] = createTheme({
    color:{
      text: "hsl(210deg,60%,25%)",
      background: "hsl(210deg,30%,90%)"
    },
    lengths:{
      mediumGap: "30px"
    }
  })
  
  // Using the theme
  export const titleStyle = style({
    backgroundColor:vars.color.background,
    color: vars.color.text,
    fontFamily: "helvetica, Sans-Serif",
    padding: vars.lengths.mediumGap,
    borderRadius: 20,
  });

  3.
• Trong

  // title.css.ts
  import {style,createTheme } from "@vanilla-extract/css";
  
  // Creating the theme
  export const [mainTheme,vars] = createTheme({
    color:{
      text: "hsl(210deg,60%,25%)",
      background: "hsl(210deg,30%,90%)"
    },
    lengths:{
      mediumGap: "30px"
    }
  })
  
  // Using the theme
  export const titleStyle = style({
    backgroundColor:vars.color.background,
    color: vars.color.text,
    fontFamily: "helvetica, Sans-Serif",
    padding: vars.lengths.mediumGap,
    borderRadius: 20,
  });

  3, chúng tôi khai báo một đối tượng trong đó các khóa là các thuộc tính CSS mà người dùng có thể đặt (chúng cần phải là thuộc tính CSS hợp lệ) và các giá trị là các đối tượng chúng tôi tạo trước đó (danh sách

  // title.css.ts
  import {style,createTheme } from "@vanilla-extract/css";
  
  // Creating the theme
  export const [mainTheme,vars] = createTheme({
    color:{
      text: "hsl(210deg,60%,25%)",
      background: "hsl(210deg,30%,90%)"
    },
    lengths:{
      mediumGap: "30px"
    }
  })
  
  // Using the theme
  export const titleStyle = style({
    backgroundColor:vars.color.background,
    color: vars.color.text,
    fontFamily: "helvetica, Sans-Serif",
    padding: vars.lengths.mediumGap,
    borderRadius: 20,
  });

  5 và

  // title.css.ts
  import {style,createTheme } from "@vanilla-extract/css";
  
  // Creating the theme
  export const [mainTheme,vars] = createTheme({
    color:{
      text: "hsl(210deg,60%,25%)",
      background: "hsl(210deg,30%,90%)"
    },
    lengths:{
      mediumGap: "30px"
    }
  })
  
  // Using the theme
  export const titleStyle = style({
    backgroundColor:vars.color.background,
    color: vars.color.text,
    fontFamily: "helvetica, Sans-Serif",
    padding: vars.lengths.mediumGap,
    borderRadius: 20,
  });

  6 của chúng tôi).

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

7

Sau đó, bước cuối cùng là chuyển giá trị trả về của

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

// Creating the theme
export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})

// Using the theme
export const titleStyle = style({
  backgroundColor:vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

2 cho hàm

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

// Creating the theme
export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})

// Using the theme
export const titleStyle = style({
  backgroundColor:vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

8 và xuất giá trị trả về:

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

8

Sau đó, chúng ta có thể bắt đầu kiểu dáng bên trong các thành phần của mình nội tuyến bằng cách gọi hàm

// title.css.ts
import {style,createTheme } from "@vanilla-extract/css";

// Creating the theme
export const [mainTheme,vars] = createTheme({
  color:{
    text: "hsl(210deg,60%,25%)",
    background: "hsl(210deg,30%,90%)"
  },
  lengths:{
    mediumGap: "30px"
  }
})

// Using the theme
export const titleStyle = style({
  backgroundColor:vars.color.background,
  color: vars.color.text,
  fontFamily: "helvetica, Sans-Serif",
  padding: vars.lengths.mediumGap,
  borderRadius: 20,
});

9 trong thuộc tính lớp và chọn tùy chọn nào chúng ta muốn cho từng phần tử.

// title.ts
import {titleStyle} from "./title.css";

document.getElementById("root").innerHTML = `
Vanilla Extract
`;

9

Đầu ra JavaScript giữ một chuỗi tên lớp cho mỗi thuộc tính kiểu. Các tên lớp này khớp với một quy tắc duy nhất trong tệp CSS đầu ra.

// title.css.ts
backgroundColor: "hsl(210deg,30%,90%)",
fontFamily: "helvetica, Sans-Serif",
color: "hsl(210deg,60%,25%)",
padding: 30,
borderRadius: 20,
"@media": {
  "screen and (max-width: 700px)": {
    padding: 10
  }
},
":hover":{
  backgroundColor: "hsl(210deg,70%,80%)"
}

0

Như bạn có thể thấy, API này cho phép bạn tạo kiểu cho các yếu tố bên trong đánh dấu của mình bằng cách sử dụng một tập hợp các ràng buộc được xác định trước. Bạn cũng tránh được nhiệm vụ khó khăn là đưa ra tên của các lớp cho mọi yếu tố. Kết quả là một cái gì đó cảm thấy rất giống Tailwind, nhưng cũng được hưởng lợi từ tất cả các cơ sở hạ tầng đã được xây dựng xung quanh TypeScript.

API Sprinkles cũng cho phép bạn viết các điều kiện và viết tắt để tạo các kiểu đáp ứng bằng các lớp tiện ích.

Gói lên

Vanilla-Extract cảm thấy như một bước mới lớn trong công cụ CSS. Rất nhiều suy nghĩ đã được đưa vào để xây dựng nó thành một giải pháp trực quan, mạnh mẽ để tạo kiểu sử dụng tất cả sức mạnh mà gõ tĩnh cung cấp.

đọc thêm

• Tài liệu chiết xuất vani
• Đánh dấu nói chuyện về vani-Extract
• Vanilla-Extract Discord
• Mã ví dụ về CodeSandbox