昂CSS

oncss 是一個 CSS-in-JS 庫，為開發(fā)人員提供強(qiáng)大的 css 功能來設(shè)計 Web 應(yīng)用程序的樣式。它支持現(xiàn)代樣式技術(shù)，包括嵌套選擇器、響應(yīng)式設(shè)計和動態(tài)關(guān)鍵幀，同時提供與 React 等 JavaScript 框架的無縫集成。

---

安裝

通過 npm 安裝 oncss 包：

npm install oncss

在項目中導(dǎo)入css函數(shù)：

import css from 'oncss';

---

核心概念：css函數(shù)

css 函數(shù)是 oncss 的核心，旨在動態(tài)生成 CSS 并將其注入到您的應(yīng)用程序中。它支持：

• CSS 屬性：使用標(biāo)準(zhǔn) CSS 屬性和值。
• 嵌套選擇器：使用 & 將樣式應(yīng)用于子元素或狀態(tài)。
• 媒體查詢：使用@media規(guī)則實施響應(yīng)式設(shè)計。
• 關(guān)鍵幀：使用@keyframes 創(chuàng)建動畫。
• 全局樣式：使用@global全局應(yīng)用樣式。
• 自定義斷點：定義可重復(fù)使用的斷點以提高響應(yīng)能力。
• 其他 At 規(guī)則：利用其他 at 規(guī)則，例如 @container、@layer 和 @supports。

基本示例

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

---

配置選項

可以通過選項對象自定義CSS功能：

可用屬性

帶選項的示例

npm install oncss

使用斷點

您可以使用樣式中定義的斷點來創(chuàng)建響應(yīng)式設(shè)計：

import css from 'oncss';

---

反應(yīng)集成

oncss 與 React 無縫集成。只需將生成的類名傳遞給您的組件即可。

反應(yīng)示例

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

---

高級功能

嵌套選擇器

將樣式應(yīng)用于子元素或偽類：

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

媒體查詢

輕松添加響應(yīng)式樣式：

const responsiveStyles = css({
  fontSize: 14,
  padding: {
    sm: 12,
    lg: 24
  },

}, {
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

關(guān)鍵幀

定義和使用動畫：

import React from 'react';
import css from 'oncss';

const buttonStyle = css({
  backgroundColor: 'green',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '8px',
  '&:hover': {
    backgroundColor: 'darkgreen',
  },
});

function Button() {
  return <button classname="{buttonStyle.toString()}">Click Me</button>;
}

export default Button;

全球風(fēng)格

輕松應(yīng)用全局樣式：

const cardStyles = css({
  padding: '20px',
  border: '1px solid #ccc',
  '& h1': {
    fontSize: '24px',
    margin: 0,
  },
  '&:hover': {
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
  },
});

---

支持的 At 規(guī)則

oncss 支持各種 CSS at 規(guī)則，以增強(qiáng)您的樣式設(shè)計能力。以下是受支持的 at 規(guī)則列表及說明：

---

服務(wù)器端樣式

oncss 通過利用 CSSFactory 存儲和管理生成的 CSS 樣式來支持服務(wù)器端渲染 (SSR)。這允許您提取樣式并將其注入到服務(wù)器渲染的 HTML 中。

反應(yīng)示例

以下是如何使用 oncss 通過 React 進(jìn)行服務(wù)器端渲染的示例：

npm install oncss

格式化CSS值

formatCSSValue 是一個實用函數(shù)，用于格式化 CSS 值，并在必要時添加 px 等單位。

import css from 'oncss';

---

TypeScript 集成

oncss 提供完整的 TypeScript 支持，允許您定義 CSS 屬性和選項的類型。

定義 CSS 屬性

您可以使用 CSSProps 類型定義 CSS 屬性的類型：

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

將選項與類型一起使用

您還可以為選項對象定義類型：

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

---

結(jié)論

oncss 簡化了現(xiàn)代 Web 應(yīng)用程序的樣式。其強(qiáng)大的功能集，從響應(yīng)式設(shè)計到關(guān)鍵幀動畫，使其成為開發(fā)人員的寶貴工具。

作者

以上是國家自然科學(xué)基金委員會的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！