8 conseils pour vous aider à tirer le meilleur parti de SASS

Sass, un préprocesseur CSS, promet des feuilles de style syntaxiquement impressionnantes. Utilisé correctement, il favorise l'évolution et sèche (ne vous répétez pas) CSS. Cependant, une mauvaise utilisation peut conduire à des fichiers plus grands et à un code redondant. Ce guide offre des conseils pour maximiser le potentiel de Sass.

Prise des clés:

• Structure du projet: Organisez efficacement votre projet SASS dès le départ. Utilisez des partiels pour modulariser votre CSS et les importer via un fichier maître sass.
• Utilisation des variables: Établir une convention de dénomination cohérente pour les variables SASS pour améliorer la lisibilité et la réutilisabilité.
• Mélange de mélange: Évitez de sur-utilisé des mixins, qui peuvent dupliquer le code et gonfler votre CSS. Mélangers de réserve pour les situations nécessitant des arguments pour générer des variations dans les styles.
• Alimentation d'espace réservé: Utiliser les espaces réservés pour des styles répétés sans duplication de code, promouvant les CSS secs.

1. Structurer votre projet SASS:

La structure du projet appropriée est cruciale. Partiels (fichiers préfixés avec un soulignement "_") décomposer CSS en morceaux gérables, améliorant la maintenabilité. Un fichier maître sass (par exemple, global.scss) importe ces partiels.

Exemple de structure de dossier:

<code>vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss</code>

global.scss Exemple:

<code>/* VENDOR - External files and default fallbacks */
@import 'vendor/_normalize.scss';

/* BASE - Variables, mixins, and placeholders */
@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';

/* FRAMEWORK - Layout and structure */
@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';

/* MODULES - Reusable components */
@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';</code>

2. Utilisation efficace de la variable SASS:

Bien que simples, les variables sont souvent mal utilisées. Une convention de dénomination à l'échelle du site est essentielle pour la compréhension et la réutilisation.

• Évitez le flou dans les noms de variables.
• adhérer à une convention de dénomination (par exemple, bem, oocss).
• justifier l'utilisation de la variable.

bons exemples:

<code>$orange: #ffa600;
$grey: #f3f3f3;
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;</code>

mauvais exemples:

<code>$link: #ffa600;
$listStyle: none;
$radius: 5px;</code>

3. Minimiser l'utilisation du mixin:

Les mixins sont puissants pour la réutilisation du code, mais la surutilisation entraîne un code dupliqué et des CS gonflés. Utilisez des mixins uniquement lorsque des arguments sont nécessaires pour créer des variations.

bon exemple:

<code>@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;
}</code>

Mauvais exemple: (mieux en tant qu'espace réservé)

<code>@mixin cta-button {
    padding: 10px;
    // ...other styles...
}</code>

4. Tiration des espaces réservés:

Les espaces réservés (%name) offrent une réutilisabilité supérieure par rapport aux mélanges, générant des CSS secs sans duplication de code.

Exemple:

<code>%bg-image {
    width: 100%;
    // ...other styles...
}

.image-one { @extend %bg-image; background-image: url(/img/image-one.jpg); }
.image-two { @extend %bg-image; background-image: url(/img/image-two.jpg); }</code>

5. Fonctions pour les calculs:

Les fonctions SASS effectuent des calculs et des valeurs de retour, utiles pour les calculs à l'échelle du site. Par exemple, calculer les largeurs de pourcentage:

<code>@function calculate-width($col-span) {
    @return 100% / $col-span;
}</code>

6. Code organisé:

mixins de groupe, fonctions, espaces réservés et variables dans leurs fichiers partiels respectifs. Gardez les éléments à l'échelle du site (variables, etc.) dans un dossier base.

7. Limitation de nidification:

La nidification excessive peut conduire à des CS complexes et trop spécifiques. Continuez à nicher à un maximum de trois niveaux.

8. Simplicité:

Prioriser la simplicité. Le SASS devrait s'améliorer, pas compliqué, CSS. Évitez les variables, fonctions ou mélanges inutiles.

Conclusion:

Ces conseils favorisent les SASS efficaces et maintenables. N'oubliez pas que les meilleures pratiques évoluent, donc l'apprentissage continu est essentiel.

Questions fréquemment posées (FAQ): (Celles-ci sont déjà bien couvertes dans le texte d'origine, donc je les omettrai pour éviter la redondance. Les FAQ d'origine sont excellentes.)

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!