国家自然科学基金委员会-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中文网其他相关文章！