Comment écrire Beautiful Sass

Code propre et beau devrait être un objectif dans chaque projet. Si d'autres développeurs doivent faire un changement, ils devraient être en mesure de lire ce qui est là et de le comprendre. Le code lisible est le cœur de la maintenabilité, et la première étape vers le code lisible est un bon linter. Comme un bon vérificateur de sorts, le linter devrait attraper toutes vos petites fautes de frappe et les erreurs de formatage, il n'est donc pas laissé aux autres de le faire. C'est la première ligne de défense avant une bonne revue de code avec d'autres développeurs.

Il existe plusieurs grands linceurs pour SASS: SCSS-Lint est un joyau de rubis, et le nouveau Sasslint et Stylelint, qui sont des packages NPM pour le nœud. Les deux vous permettent de configurer des règles de liaison pour votre projet, telles que les niveaux de nidification maximum, les zéros en tête sur les décimales et l'organisation des propriétés dans un bloc. Vous pouvez même créer vos propres règles au besoin.

Regardez Atoz: Sass Apprenez la lettre Sass par lettre Regardez ce cours Regardez ce cours

Les directives SASS sont pratiques pour organiser votre projet, mettre en place vos liners, établir des conventions de dénomination, etc. Écrit par Hugo, c'est un style de style opinionné pour votre code; Tout cela pourrait ne pas fonctionner pour vous, mais c'est un excellent point de départ.

Si vous utilisez des variables Sass, des fonctions et des mixins, il est recommandé de documenter leur fonctionnement. Les auteurs de la boîte à outils le trouveront particulièrement importante, mais toute personne ayant un outillage complet intégré à leurs projets devrait également envisager la documentation de leur équipe. Un autre excellent outil de Hugo est Sassdoc, un package NPM qui analyse vos commentaires SASS et génère un beau site statique avec votre documentation.

Voici le commentaire Sassdoc pour notre fonction de teinte (..) dans Accoutrment-Colors. Il commence par une description générale, puis documente explicitement chaque paramètre et le retour attendu:

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

En utilisant le thème par défaut (à partir duquel il y en a plusieurs à choisir, ou vous pouvez concevoir le vôtre), Sassdoc convertit qui commente un site Web statique, comme indiqué ci-dessous.

Les tests sont également importants si vous faites quelque chose de complexe avec des fonctions ou des mixins. C'est un bon moyen de vous assurer que votre code ne se cassera pas à chaque fois que vous effectuez des ajustements, mais il peut également être utile pour développer de nouvelles fonctionnalités. Si vous écrivez d'abord les tests, vous saurez exactement si la fonctionnalité fonctionne correctement lorsque vos tests passent!

Vrai est une boîte à outils à test d'unité de la vôtre vraiment, écrite en sass pure afin qu'il fonctionne n'importe où Sass est compilé. Les tests de base se produisent dans les fonctions d'assertion: affirmation-égale (..), assertion-universitaire (..), assert-true (..) et assert-false (..). Ceux-ci sont organisés en tests et peuvent être regroupés dans des modules de test. Voici un exemple de véritable test de notre teinte (..) Fonction:

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

Lorsqu'il est compilé, True sortira les commentaires CSS avec des résultats détaillés et vous avertira dans la console si des tests échouent:

<span>@include test-module('Tint [function]') {
</span>  <span>@include test('Adjusts the tint of a color') {
</span>    <span>@include assert-equal(
</span>      <span>tint('primary', 25%),
</span>      <span>mix(#fff, color('primary'), 25%),
</span>      <span>'Returns a color mixed with white at a given weight.');
</span>  <span>}
</span><span>}
</span>

Qu'est-ce que cela signifie que deux tests ont été «sorties vers CSS» dans cet exemple? Ces tests ne sont pas affichés, mais ils testent la sortie de mixin. En utilisant le CSS pur, True ne peut confirmer que les résultats des tests de fonction, donc les tests de mélange sont simplement sortis du CSS où ils peuvent être comparés manuellement (brut) ou avec un analyseur CSS (mieux!). Pour rendre cela facile, True s'intègre aux coureurs de test JavaScript tels que Mocha, et a une interface de ligne de commande Ruby écrite par Scott Davis. L'un ou l'autre analysera complètement la sortie CSS, y compris la sortie des mixins, et vous donnera des résultats complets pour les tests de fonction et de mélange:

/* # Module: Tint [function] */
/* ------------------------- */
/* Test: Adjusts the tint of a color */
/*   ✔ Returns a color mixed with white at a given weight. */

/* … */

/* # SUMMARY ---------- */
/* 16 Tests: */
/*  - 14 Passed */
/*  - 0 Failed */
/*  - 2 Output to CSS */
/* -------------------- */

Les questions fréquemment posées sur l'écriture de beaux sass

Comment puis-je utiliser SASS pour créer des règles imbriquées?

SASS fournit une fonctionnalité unique qui vous permet de nicher vos sélecteurs CSS d'une manière qui suit la même hiérarchie visuelle de votre HTML. Pour créer des règles imbriquées, vous placez simplement un sélecteur à l'intérieur d'un autre. Le sélecteur intérieur est ensuite appliqué à l'endroit où il est imbriqué dans le sélecteur extérieur. Cela peut rendre votre code plus propre et plus facile à comprendre. Par exemple:

nav {
ul {
marge: 0;
padding: 0;
list-style: Aucun;
}

li {Affichage: bloc en ligne; }

a {
affichage: bloc;
rembourrage: 6px 12px;
text-décoration: aucun;
}
}

quelles sont les Les avantages de l'utilisation des variables SASS?

Les variables SASS vous permettent de stocker des informations que vous souhaitez réutiliser tout au long de votre feuille de style. Vous pouvez stocker des choses comme les couleurs, les piles de polices ou toute valeur CSS que vous pensez que vous voudrez réutiliser. Sass utilise le symbole $ pour faire de quelque chose une variable. Voici un exemple:

$ Font-Stack: Helvetica, Sans-Serif;
$ primaire-Color: # 333;

Body {
Font: 100% $ font- Font- pile;
couleur: $ primaire-couleur;
}

comment puis-je utiliser Sass pour une meilleure organisation de code?

SASS vous permet de diviser vos styles en fichiers séparés, qui Peut être très utile pour l'organisation du code. Vous pouvez créer des fichiers SASS partiels qui contiennent des segments de votre code CSS. Ces fichiers commencent par un soulignement et peuvent être importés dans d'autres fichiers SASS. Cela vous permet de modulariser votre CSS et de garder les choses plus faciles à maintenir.

Comment puis-je utiliser SASS pour créer des fonctions complexes?

SASS prend en charge l'utilisation de fonctions en fournissant un ensemble de fonctions intégrées, telles que l'ajustement des couleurs ou effectuant des opérations mathématiques complexes. Vous pouvez également définir vos propres fonctions à l'aide de la directive @Function. Voici un exemple d'une fonction simple:

@Function double ($ nombre) {
@return $ Number * 2;
}

.box {width: double (5px )); }

Comment puis-je utiliser SASS pour créer des mixins?

Les mixins en SASS sont un moyen d'inclure («Mixing in») un tas de propriétés d'un ensemble de règles dans un autre ensemble de règles . Ils sont définis à l'aide de la directive @Mixin. Voici un exemple:

@Mixin Transform ($ Property) {
-Webkit-Transform: $ Property;
-ms-transform: $ Property;
Transform: $ Property;
}

.box {@include transform (Rotate (30Deg)); }

Comment puis-je utiliser SASS pour créer Extend / Héritage?

La directive @Extend dans SASS permet à un sélecteur de hériter des styles d'un autre sélecteur. Voici un exemple:

.Message {
Border: 1px solide #ccc;
padding: 10px;
couleur: # 333;
}

. {
@Extend .Message;
Border-Color: Green;
}

Comment puis-je utiliser Sass pour créer des opérateurs?

SASS prend en charge les opérateurs mathématiques standard comme, -, *, /, et %. Cela peut être particulièrement utile lorsque vous travaillez avec des tailles et des couleurs. Voici un exemple:

.Container {largeur: 100%; }

.article {
float: gauche;
largeur: 600px / 960px * 100%;
}

.aside {
float: droite;
Largeur: 300px / 960px * 100%;
}

Comment puis-je utiliser SASS pour créer des directives de contrôle?

SASS prend en charge les directives de contrôle pour les bibliothèques, y compris @For, @For , @Each et @ While. Ceux-ci peuvent être utilisés pour créer des styles complexes avec moins de code. Voici un exemple:

@for $ i de 1 à 3 {
.item - # {$ i} {width: 2em * $ i; }
}

Comment puis-je utiliser SASS pour créer des commentaires?

SASS prend en charge deux types de commentaires. Les commentaires / * * / Style sont conservés dans la sortie CSS où les commentaires de style AS // ne sont pas inclus dans la sortie CSS. Voici un exemple:

/ * Ce commentaire est
* plusieurs lignes de long.
* Puisqu'il utilise la syntaxe de commentaire CSS,
* Il apparaîtra dans la sortie CSS. * /
corps {couleur: noir; }

// Ces commentaires n'apparaîtront pas dans la sortie CSS.
// Ils sont très utiles pour la documentation de code.
a {couleur: vert; }

Comment puis-je utiliser SASS pour créer l'interpolation?

L'interpolation dans SASS vous permet d'insérer la valeur d'une variable en une chaîne. Cela se fait à l'aide de la syntaxe # {}. Voici un exemple:

$ name: foo;
$ att: border;
p. # {$ Name} {
# {$ att} -color: bleu;
}

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!