Was ist CSS3, Sass, SCSS, Kompass, weniger, Bourbon

CSS, SASS, SCSS, Kompass, weniger und Bourbon: Ein kurzer Vergleich

Dieser Leitfaden bietet einen kurzen Überblick über CSS3 und mehrere beliebte CSS -Präprozessoren. Für Anfänger empfehlen wir dringend, mit Compass zu beginnen!

css3:

• Die neueste Version von Cascading -Stilblättern.
• bietet erweiterte Funktionen wie Animationen, Übergänge und Transformationen.
• Lernen Sie CSS3 CSS3 Demo CSS3 Dokumentation

SASS & SCSS:

• sass (syntaktisch fantastische Stilblätter): Ein CSS -Erweiterungsfunktionen wie Nesting, Variablen und Mixins. Verwendet Einrückung für die Syntax. Serverseitige Verarbeitung (normalerweise mit Ruby).
• scss

SASS -Website

scss Beispiel:

Kompass:

/* CSS */
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

/* SCSS */
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

/* SASS */
li
  font:
    family: serif
    weight: bold
    size: 1.2em

ein CSS -Framework auf Sass.

bietet eine Bibliothek hilfreicher Mixins, Cross-Browser-Kompatibilitätsfunktionen und Typografie-Muster.

vereinfacht die Sprite -Erzeugung.

• leicht über die Befehlszeile aktualisiert.
• Compass -Website
• Kompass -Demo

Kompass -Installation 1

Kompass -Installation 2 Beispiel: Kompasscode:

generierte CSS:

weniger:

#opacity-10 {
  @include opacity(0.1);
}

/* For IE */
#opacity-10 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}

/* For other browsers */
#opacity-10 {
  opacity: 0.1;
}

• Ein auf JavaScript-basierter CSS-Präprozessor, verarbeiteter clientseitig.
• bietet SASS ähnliche Funktionen (Verschachtelung, Variablen, Mixins).
• fehlt ein Framework, der dem Kompass entspricht.

weniger Website weniger Demo Weniger Dokumentation weniger gegen SASS

bourbon:

• Eine leichte Mixinbibliothek für Sass.
• arbeitet nahtlos mit Tools wie Codekit und Hammer zusammen.

Bourbon -Website Bourbon Demo Bourbon -Dokumentation

(Bitte ersetzen Sie die Klammern link-to... Platzhalter durch tatsächliche URLs.)

Das obige ist der detaillierte Inhalt vonWas ist CSS3, Sass, SCSS, Kompass, weniger, Bourbon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!