Commencer avec Sass

Cet article explore la puissance de SASS, un préprocesseur CSS, pour rationaliser votre flux de travail CSS. Il a été mis à jour avec les informations actuelles et le formatage amélioré.

SASS: une révolution CSS

SASS améliore le CSS avec des fonctionnalités telles que des variables, la nidification et les mixins, ce qui rend les feuilles de style plus gérables et dynamiques. Il propose deux syntaxes: la syntaxe en retrait d'origine (pour la brièveté) et le plus de type CSS .scss (plus largement adopté). Cet article se concentre sur .scss.

Pourquoi utiliser Sass?

SASS possède une grande communauté active et un riche écosystème d'extensions. Sa modularité et ses capacités organisationnelles simplifient les projets à grande échelle. Le choix entre la syntaxe en retrait et .scss est une question de préférence; La similitude de .scss avec CSS facilite les débutants.

flux de travail et outils

Évitez l'édition directement des fichiers .css. Au lieu de cela, modifiez les fichiers .scss, qui sont ensuite compilés en CSS. Cela peut être automatisé pendant le processus de construction ou en utilisant des outils GUI comme LiveLeLoad, Codekit (Mac-uniquement) ou Prepros (multiplateforme). Ces outils recompilent automatiquement votre SASS lorsque vous enregistrez des modifications, rafraîchissant votre navigateur pour des commentaires instantanés.

Essentiels codage sass

• nidification: sass permet de nicher les sélecteurs, reflétant votre structure HTML. Cependant, évitez la nidification excessivement profonde (plus de quatre niveaux) pour empêcher les sélecteurs trop spécifiques. Prioriser le code modulaire pour la réutilisabilité.

• Variables: Définir les variables en utilisant $variable-name: value; pour centraliser les paramètres de style. Cela simplifie les mises à jour et maintient la cohérence.

• Fonctions et opérateurs: SASS prend en charge les opérateurs mathématiques standard et les fonctions intégrées pour la manipulation des couleurs, le traitement de texte, et plus encore.

• mixins: Créer des blocs de styles réutilisables en utilisant @mixin mixin-name { ... } et les inclure avec @include mixin-name;. Ceci est particulièrement utile pour gérer les préfixes des fournisseurs ou les modèles de style commun.

Exemple: Sass Nesting (bon vs méchant)

bon:

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

mauvais (excessivement imbriqué):

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

Exemple: variables sass

$site-max-width: 960px;
$font-color: #333;

body {
  color: $font-color;
}

#main {
  max-width: $site-max-width;
}

Exemple: mixin sass (préfixes du fournisseur)

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

.element {
  @include box-shadow(2px 2px 5px #888);
}

Organisation de votre projet SASS

Utilisez plusieurs fichiers .scss et organisez-les dans des dossiers. Fichiers partiels préfixés (extraits) avec un soulignement (_). Importez ces partiels dans votre fichier principal .scss en utilisant @import.

Exemple: style.scss

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

Extension des Sass avec la boussole

Compass est un framework puissant construit sur le SASS, fournissant des mixins supplémentaires, des services publics (comme la génération de sprite), et plus encore. Configurez-le à l'aide d'un fichier config.rb.

Génération de sprites avec boussole

Compasse simplifie la gestion des sprites. Organisez vos images en dossiers. Importez-les à l'aide de @import "images/*.png"; et générez des classes CSS en utilisant @include all-icons-sprites; ou des fonctions de sprite individuelles.

Exemple: Génération de sprite de boussole

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

Cela générera des classes CSS pour chaque image du dossier images/icons.

Conclusion

SASS améliore considérablement le flux de travail CSS. Commencez à l'utiliser aujourd'hui pour écrire CSS plus efficace, maintenable et agréable.

faqs

• SASS vs SCSS: SCSS utilise une syntaxe de type CSS (supports, demi-colons), tandis que le SASS d'origine utilise l'indentation. SCSS est généralement préféré.

• Installation: Utiliser npm install -g sass après avoir installé Node.js et npm.

• Compilation: Utiliser sass input.scss output.css ou l'option --watch pour la recompilation automatique.

(Les FAQ restantes sont répondues directement dans le texte d'origine et ne sont pas répétées ici pour la concision.)

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!