昂CSS

oncss 是一個(gè) CSS-in-JS 函式庫(kù)，為開發(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

在專案中導(dǎo)入css函數(shù)：

import css from 'oncss';

---

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

css 函數(shù)是 oncss 的核心，旨在動(dòng)態(tài)產(chǎn)生 CSS 並將其註入到您的應(yīng)用程式中。它支援：

• CSS 屬性：使用標(biāo)準(zhǔn) CSS 屬性和值。
• 巢狀選擇器：使用 & 將樣式套用於子元素或狀態(tài)。
• 媒體查詢：使用@media規(guī)則實(shí)作響應(yīng)式設(shè)計(jì)。
• 關(guān)鍵影格：使用@keyframes 建立動(dòng)畫。
• 全域樣式：使用@global全域應(yīng)用樣式。
• 自訂斷點(diǎn)：定義可重複使用的斷點(diǎn)以提高反應(yīng)能力。
• 其他 At 規(guī)則：利用其他 at 規(guī)則，例如 @container、@layer 和 @supports。

基本範(fàn)例

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)物件自訂CSS功能：

可用屬性

帶選項(xiàng)的範(fàn)例

npm install oncss

使用斷點(diǎn)

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

import css from 'oncss';

---

反應(yīng)集成

oncss 與 React 無(wú)縫整合。只需將產(chǎn)生的類別名稱傳遞給您的元件即可。

反應(yīng)範(fàn)例

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ìn)階功能

嵌套選擇器

將樣式套用於子元素或偽類：

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)畫：

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)格

輕鬆套用全域樣式：

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ō)明：

---

伺服器端樣式

oncss 透過(guò)利用 CSSFactory 儲(chǔ)存和管理產(chǎn)生的 CSS 樣式來(lái)支援伺服器端渲染 (SSR)。這允許您提取樣式並將其註入到伺服器渲染的 HTML 中。

反應(yīng)範(fàn)例

以下是如何使用 oncss 透過(guò) React 進(jìn)行伺服器端渲染的範(fàn)例：

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)物件定義類型：

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)畫，使其成為開發(fā)人員的寶貴工具。

作者

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