国家自然科学基金委员会

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