昂CSS

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

---

安裝

通過(guò) npm 安裝 oncss 包：

npm install oncss

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

import css from 'oncss';

---

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

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

• CSS 屬性：使用標(biāo)準(zhǔn) CSS 屬性和值。
• 嵌套選擇器：使用 & 將樣式應(yīng)用于子元素或狀態(tài)。
• 媒體查詢：使用@media規(guī)則實(shí)施響應(yīng)式設(shè)計(jì)。
• 關(guān)鍵幀：使用@keyframes 創(chuàng)建動(dòng)畫(huà)。
• 全局樣式：使用@global全局應(yīng)用樣式。
• 自定義斷點(diǎn)：定義可重復(fù)使用的斷點(diǎn)以提高響應(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);

---

配置選項(xiàng)

可以通過(guò)選項(xiàng)對(duì)象自定義CSS功能：

可用屬性

帶選項(xiàng)的示例

npm install oncss

使用斷點(diǎn)

您可以使用樣式中定義的斷點(diǎn)來(lái)創(chuàng)建響應(yīng)式設(shè)計(jì)：

import css from 'oncss';

---

反應(yīng)集成

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

反應(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);

---

高級(jí)功能

嵌套選擇器

將樣式應(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)鍵幀

定義和使用動(dòng)畫(huà)：

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è)計(jì)能力。以下是受支持的 at 規(guī)則列表及說(shuō)明：

---

服務(wù)器端樣式

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

反應(yīng)示例

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

npm install oncss

格式化CSS值

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

import css from 'oncss';

---

TypeScript 集成

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

定義 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);

將選項(xiàng)與類型一起使用

您還可以為選項(xiàng)對(duì)象定義類型：

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

---

結(jié)論

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

作者

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