oncss

oncss ist eine CSS-in-JS-Bibliothek, die Entwicklern eine leistungsstarke CSS-Funktion zum Gestalten ihrer Webanwendungen bietet. Es erm?glicht moderne Styling-Techniken, einschlie?lich verschachtelter Selektoren, responsivem Design und dynamischen Keyframes, und bietet gleichzeitig eine nahtlose Integration mit JavaScript-Frameworks wie React.

Installation

Installieren Sie das oncss-Paket über npm:

npm install oncss

Importieren Sie die CSS-Funktion in Ihr Projekt:

import css from 'oncss';

Kernkonzept: Die CSS-Funktion

Die CSS-Funktion ist das Herzstück von oncss und wurde entwickelt, um CSS dynamisch zu generieren und in Ihre Anwendung einzufügen. Es unterstützt:

• CSS-Eigenschaften: Standard-CSS-Eigenschaften und -Werte verwenden.
• Verschachtelte Selektoren: Wenden Sie Stile mit & auf untergeordnete Elemente oder Zust?nde an.
• Medienabfragen: Implementieren Sie responsive Designs mit @media-Regeln.
• Keyframes: Erstellen Sie Animationen mit @keyframes.
• Globale Stile: Wenden Sie Stile global mit @global an.
• Benutzerdefinierte Haltepunkte: Definieren Sie wiederverwendbare Haltepunkte für die Reaktionsf?higkeit.
• Andere At-Regeln: Nutzen Sie zus?tzliche At-Regeln wie @container, @layer und @supports.

Grundlegendes Beispiel

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

Konfigurationsoptionen

Die CSS-Funktion kann über ein Optionsobjekt angepasst werden:

Verfügbare Eigenschaften

Beispiel mit Optionen

npm install oncss

Verwenden von Haltepunkten

Sie k?nnen die definierten Haltepunkte in Ihren Stilen verwenden, um responsive Designs zu erstellen:

import css from 'oncss';

Reagieren Sie auf Integration

oncss l?sst sich nahtlos in React integrieren. übergeben Sie einfach den generierten Klassennamen an Ihre Komponente.

Reaktionsbeispiel

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

Erweiterte Funktionen

Verschachtelte Selektoren

Stile auf untergeordnete Elemente oder Pseudoklassen anwenden:

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

Medienanfragen

Fügen Sie ganz einfach responsive Stile hinzu:

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

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

Schlüsselbilder

Animationen definieren und verwenden:

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;

Globale Stile

Globale Stile mühelos anwenden:

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

Unterstützte At-Regeln

oncss unterstützt verschiedene CSS-At-Regeln, um Ihre Styling-M?glichkeiten zu verbessern. Hier ist eine Liste der unterstützten At-Regeln mit Beschreibungen:

Serverseitiges Styling

oncss unterstützt serverseitiges Rendering (SSR) durch die Nutzung der CSSFactory zum Speichern und Verwalten generierter CSS-Stile. Dadurch k?nnen Sie Stile extrahieren und in Ihr vom Server gerendertes HTML einfügen.

Beispiel mit React

Hier ist ein Beispiel für die Verwendung von oncss für serverseitiges Rendering mit React:

npm install oncss

formatCSSValue

formatCSSValue ist eine Hilfsfunktion, die CSS-Werte formatiert und bei Bedarf Einheiten wie px hinzufügt.

import css from 'oncss';

TypeScript-Integration

oncss bietet vollst?ndige TypeScript-Unterstützung, sodass Sie Typen für Ihre CSS-Eigenschaften und -Optionen definieren k?nnen.

Definieren von CSS-Eigenschaften

Sie k?nnen die Typen für Ihre CSS-Eigenschaften mithilfe des CSSProps-Typs definieren:

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

Verwenden von Optionen mit Typen

Sie k?nnen auch Typen für das Optionsobjekt definieren:

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

Abschluss

oncss vereinfacht das Styling für moderne Webanwendungen. Sein robuster Funktionsumfang, vom responsiven Design bis hin zu Keyframe-Animationen, macht es zu einem unsch?tzbar wertvollen Werkzeug für Entwickler.

Autor

Naxrul Ahmed

Naxrul Ahmed GitHub Profile npm Profile Open Source Projects

GitHub-Profil npm-Profil

Open-Source-Projekte

?? Wo Sie mich finden

Das obige ist der detaillierte Inhalt vonONCSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!