ONCSS

oncss

oncss는 개발자에게 웹 애플리케이션 스타일을 지정할 수 있는 강력한 CSS 기능을 제공하는 CSS-in-JS 라이브러리입니다. 중첩된 선택기, 반응형 디자인, 동적 키프레임을 포함한 현대적인 스타일링 기술을 지원하는 동시에 React와 같은 JavaScript 프레임워크와의 원활한 통합을 제공합니다.

---

설치

npm을 통해 oncss 패키지를 설치합니다.

npm install oncss

프로젝트에서 CSS 기능 가져오기:

import css from 'oncss';

---

핵심 개념: CSS 함수

CSS 기능은 CSS를 동적으로 생성하고 애플리케이션에 주입하도록 설계된 oncss의 핵심입니다. 다음을 지원합니다:

• CSS 속성: 표준 CSS 속성 및 값을 사용합니다.
• 중첩 선택기: &를 사용하여 하위 요소나 상태에 스타일을 적용합니다.
• 미디어 쿼리: @media 규칙을 사용하여 반응형 디자인을 구현합니다.
• 키프레임: @keyframes를 사용하여 애니메이션을 만듭니다.
• 전역 스타일: @global을 사용하여 전역적으로 스타일을 적용합니다.
• 사용자 정의 중단점: 응답성을 위해 재사용 가능한 중단점을 정의합니다.
• 기타 At-규칙: @container, @layer 및 @supports와 같은 추가 At-규칙을 활용합니다.

기본 예

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-rules을 지원합니다. 다음은 설명과 함께 지원되는 at-rules 목록입니다.

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는 생성된 CSS 스타일을 저장하고 관리하기 위해 CSSFactory를 활용하여 서버측 렌더링(SSR)을 지원합니다. 이를 통해 서버에서 렌더링된 HTML에 스타일을 추출하고 삽입할 수 있습니다.

반응의 예

다음은 React로 서버 측 렌더링에 oncss를 사용하는 방법에 대한 예입니다.

npm install oncss

형식CSS값

formatCSSValue는 필요한 곳에 px와 같은 단위를 추가하여 CSS 값의 형식을 지정하는 유틸리티 함수입니다.

import css from 'oncss';

---

타입스크립트 통합

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는 최신 웹 애플리케이션의 스타일을 단순화합니다. 반응형 디자인부터 키프레임 애니메이션까지 강력한 기능 세트를 갖추고 있어 개발자에게 매우 귀중한 도구입니다.

작가

낙스룰 아메드

Naxrul Ahmed GitHub Profile npm Profile Open Source Projects

GitHub 프로필 npm 프로필

오픈 소스 프로젝트

⚡️ 나를 찾을 수 있는 곳

위 내용은 ONCSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!