國家自然科學基金委員會-css教學-PHP中文網

昂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中文網其他相關文章！