Qu'est-ce que CSS3, Sass, SCSS, Compass, moins, Bourbon

CSS, SASS, SCSS, Compass, moins et Bourbon: une comparaison rapide

Ce guide fournit un aperçu concis de CSS3 et de plusieurs préprocesseurs CSS populaires. Pour les débutants, nous recommandons fortement de commencer par Compass!

CSS3:

• La dernière version des feuilles de style en cascade.
• propose des fonctionnalités avancées comme les animations, les transitions et les transformations.
• Apprenez CSS3 Demo CSS3 CSS3 Documentation

sass & scss:

• sass (feuilles de style syntaxiquement impressionnantes): une extension CSS offrant des fonctionnalités comme la nidification, les variables et les mixins. Utilise l'indentation pour la syntaxe. Traitement côté serveur (généralement avec Ruby).
• SCSS (Sassy CSS): fonctionnellement identique au SASS, mais utilise une syntaxe de type CSS avec des accolades bouclées.

SITE WEB SASS DOCUMENTATION SCSS Installation SASS

Exemple:

<code class="language-css">/* 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</code>

Compasse:

• un framework CSS construit sur Sass.
• fournit une bibliothèque de mixins utiles, de caractéristiques de compatibilité entre les navigateurs et de modèles de typographie.
• simplifie la génération de sprites.
• facilement mis à jour via la ligne de commande.

Site Web Compass Demo Compass Installation de la boussole 1 Installation de la compasse 2

Exemple:

Code de boussole:

<code class="language-scss">#opacity-10 {
  @include opacity(0.1);
}</code>

CSS généré:

<code class="language-css">/* For IE */
#opacity-10 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}

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

Moins:

• un préprocesseur CSS basé sur JavaScript, côté client traité.
• offre des fonctionnalités similaires au SASS (nidification, variables, mixins).
• manque d'un cadre équivalent à la boussole.

Moins de site Web Moins de démo Moins de documentation Moins vs sass

Bourbon:

• Une bibliothèque de mélange légère pour Sass.
• fonctionne parfaitement avec des outils comme Codekit et Hammer.

Bourbon Site Web Bourbon Demo Bourbon Documentation

(veuillez remplacer les espaces réservés à crochet link-to... par des URL réelles.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!