ONCSS-tutorial css-php.cn

oncss

oncss ialah perpustakaan CSS-dalam-JS yang menyediakan pembangun dengan fungsi css yang berkuasa untuk menggayakan aplikasi web mereka. Ia mendayakan teknik penggayaan moden, termasuk pemilih bersarang, reka bentuk responsif dan bingkai kunci dinamik, semuanya sambil menawarkan penyepaduan yang lancar dengan rangka kerja JavaScript seperti React.

Pemasangan

Pasang pakej oncss melalui npm:

npm install oncss

Salin selepas log masuk

Import fungsi css dalam projek anda:

import css from 'oncss';

Salin selepas log masuk

Konsep Teras: Fungsi css

Fungsi css ialah nadi oncss, direka untuk menjana dan menyuntik CSS secara dinamik ke dalam aplikasi anda. Ia menyokong:

Sifat CSS: Gunakan sifat dan nilai CSS standard.
Pemilih Bersarang: Gunakan gaya pada elemen atau keadaan anak menggunakan &.
Pertanyaan Media: Laksanakan reka bentuk responsif dengan peraturan @media.
Kerangka kekunci: Cipta animasi dengan @keyframes.
Gaya Global: Gunakan gaya secara global dengan @global.
Titik Putus Tersuai: Tentukan titik putus boleh guna semula untuk responsif.
Peraturan Peraturan Lain: Gunakan peraturan peraturan tambahan seperti @bekas, @lapisan dan @sokongan.

Contoh Asas

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

Salin selepas log masuk

Pilihan Konfigurasi

Fungsi css boleh disesuaikan melalui objek pilihan:

Hartanah Tersedia

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.

Contoh dengan Pilihan

npm install oncss

Salin selepas log masuk

Menggunakan Titik Putus

Anda boleh menggunakan titik putus yang ditentukan dalam gaya anda untuk mencipta reka bentuk responsif:

import css from 'oncss';

Salin selepas log masuk

Integrasi Reaksi

oncss disepadukan dengan lancar dengan React. Hanya hantar nama kelas yang dijana kepada komponen anda.

Contoh Reaksi

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

Salin selepas log masuk

Ciri Lanjutan

Pemilih Bersarang

Gunakan gaya pada elemen kanak-kanak atau kelas pseudo:

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

Salin selepas log masuk

Pertanyaan Media

Tambah gaya responsif dengan mudah:

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

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

Salin selepas log masuk

Bingkai utama

Takrif dan gunakan animasi:

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;

Salin selepas log masuk

Gaya Global

Gunakan gaya global dengan mudah:

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

Salin selepas log masuk

Disokong At-Rules

oncss menyokong pelbagai peraturan CSS untuk meningkatkan keupayaan penggayaan anda. Berikut ialah senarai peraturan-peraturan yang disokong dengan penerangan:

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.

Penggayaan Sebelah Pelayan

oncss menyokong pemaparan sisi pelayan (SSR) dengan menggunakan CSSFactory untuk menyimpan dan mengurus gaya CSS yang dijana. Ini membolehkan anda mengekstrak dan menyuntik gaya ke dalam HTML yang diberikan pelayan anda.

Contoh dengan React

Berikut ialah contoh cara menggunakan oncss untuk pemaparan sebelah pelayan dengan React:

npm install oncss

Salin selepas log masuk

formatCSSValue

formatCSSValue ialah fungsi utiliti yang memformat nilai CSS, menambah unit seperti px jika perlu.

import css from 'oncss';

Salin selepas log masuk

Integrasi TypeScript

oncss menyediakan sokongan TypeScript penuh, membolehkan anda menentukan jenis untuk sifat dan pilihan CSS anda.

Menentukan Sifat CSS

Anda boleh menentukan jenis untuk sifat CSS anda menggunakan jenis CSSProps:

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

Salin selepas log masuk

Menggunakan Pilihan dengan Jenis

Anda juga boleh menentukan jenis untuk objek pilihan:

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

Salin selepas log masuk

Kesimpulan

oncss memudahkan penggayaan untuk aplikasi web moden. Set cirinya yang mantap, daripada reka bentuk responsif kepada animasi bingkai utama, menjadikannya alat yang tidak ternilai untuk pembangun.