國家自然科學基金委員會

昂CSS

oncss 是一個 CSS-in-JS 函式庫，為開發人員提供強大的 css 功能來設計 Web 應用程式的樣式。它支援現代樣式技術，包括嵌套選擇器、響應式設計和動態關鍵幀，同時提供與 React 等 JavaScript 框架的無縫整合。

---

安裝

透過 npm 安裝 oncss 套件：

npm install oncss

在專案中導入css函數：

import css from 'oncss';

---

核心概念：css函數

css 函數是 oncss 的核心，旨在動態產生 CSS 並將其註入到您的應用程式中。它支援：

• CSS 屬性：使用標準 CSS 屬性和值。
• 巢狀選擇器：使用 & 將樣式套用於子元素或狀態。
• 媒體查詢：使用@media規則實作響應式設計。
• 關鍵影格：使用@keyframes 建立動畫。
• 全域樣式：使用@global全域應用樣式。
• 自訂斷點：定義可重複使用的斷點以提高反應能力。
• 其他 At 規則：利用其他 at 規則，例如 @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功能：

可用屬性

Property	Type	Description
classPrefix	string	Adds a prefix to generated class names.
breakpoints	object	Custom breakpoints for responsive designs.
aliases	object	Custom shorthand properties for CSS rules.
injectStyle	boolean	Controls whether styles are auto-injected.
skipProps	function	Filters out unwanted properties.
getValue	function	Transforms property values dynamically.
getProps	function	Customizes specific property handling.

帶選項的範例

npm install oncss

使用斷點

您可以使用樣式中定義的斷點來建立響應式設計：

import css from 'oncss';

---

反應集成

oncss 與 React 無縫整合。只需將產生的類別名稱傳遞給您的元件即可。

反應範例

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,
  },
});

媒體查詢

輕鬆加入響應式樣式：

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

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

關鍵影格

定義並使用動畫：

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;

全球風格

輕鬆套用全域樣式：

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 規則

oncss 支援各種 CSS at 規則，以增強您的樣式設計能力。以下是受支援的 at 規則清單及說明：

At-Rule	Description
@media	Used for applying styles based on media queries for responsive design.
@keyframes	Defines animations that can be applied to elements.
@global	Applies styles globally across the entire application.
@container	Used for container queries to apply styles based on container size.
@layer	Defines style layers to control the order of style application.
@supports	Applies styles based on the support of specific CSS features in the browser.

---

伺服器端樣式

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

反應範例

以下是如何使用 oncss 透過 React 進行伺服器端渲染的範例：

npm install oncss

格式化CSS值

formatCSSValue 是一個實用函數，用於格式化 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,
  },
});

---

結論

oncss 簡化了現代 Web 應用程式的樣式。其強大的功能集，從響應式設計到關鍵影格動畫，使其成為開發人員的寶貴工具。

作者

納克斯魯爾·艾哈邁德

Naxrul Ahmed GitHub Profile npm Profile Open Source Projects

GitHub 簡介 npm 簡介

開源專案

表>

⚡️ 哪裡可以找到我

以上是國家自然科學基金委員會的詳細內容。更多資訊請關注PHP中文網其他相關文章！