Sass fonctionne pour démarrer vos feuilles de style

Cet article a été initialement publié le 11 novembre 2014 et a été mis à jour.

SASS possède une suite de fonctions intégrées conçues pour rationaliser votre flux de travail de style. Explorons quelques exemples clés.

Fait des suraltes de clé

Les fonctions intégrées de Sass accélèrent considérablement le développement du style. Fonctions telles que
• et darken Ajuster la saturation des couleurs par un pourcentage, tandis que lighten et opacify contrôler l'opacité des couleurs. Cela garantit la cohérence des palettes des couleurs, même avec les changements de couleur de marque à mi-projets. transparentize
La fonction
• génère des couleurs contrastées, idéales pour créer des appels à l'appel visuellement frappants. La fonction complement convertit les nombres en pourcentages, simplifiant les ajustements typographiques et réactifs. percentage
SASS propose une fonction en ligne
• , semblable aux opérateurs ternaires dans d'autres langues. Cela permet un style dépendant de la variable, en particulier bénéfique pour les conceptions réactives où les propriétés s'adaptent en fonction de la taille de l'écran ou d'autres variables dynamiques. if

Manipulation des couleurs: , darken, lighten, opacify transparentize

Les fonctions

et darken sont sans doute les plus connues. Ils ajustent la légèreté des couleurs par un pourcentage spécifié: lighten

<code class="language-scss">$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);</code>

Cela élimine la nécessité de déterminer manuellement les codes hexagonaux pour les nuances légèrement modifiées. Par exemple:

<code class="language-scss">.brand-button {
  background: $main-color;
}

.brand-button:hover {
  background: $lighter-color;
}

.brand-button:visited {
  background: $darker-color;
}</code>

compile à:

<code class="language-css">.brand-button {
  background: #6dcff6;
}

.brand-button:hover {
  background: #cdeffc;
}

.brand-button:visited {
  background: #0fafee;
}</code>

Cette approche maintient la cohérence des couleurs dans votre projet. Un seul

change se propage partout. $main-color

De même,

et opacify Control Color Opacité en utilisant des valeurs décimales (0-1): transparentize

<code class="language-scss">$main-color: rgba(0, 0, 0, 0.5);
$opaque-color: opacify($main-color, 0.5);
$transparent-color: transparentize($main-color, 0.3);</code>

utile pour les modaux et les superpositions, ces fonctions, comme

et darken, facilitent un style efficace et cohérent. lighten et fade-in sont des alias pour fade-out et opacify. transparentize

Contraste et conversion: et complement percentage

La fonction

renvoie la couleur complémentaire, parfaite pour créer un contraste visuel dans l'appel à l'action: complement

<code class="language-scss">$main-color: #6dcff6;
$call-to-action: complement($main-color); // Returns #f6946d</code>

La fonction

convertit les nombres en pourcentages, simplifiant les calculs: percentage

<code class="language-scss">width: percentage(0.16); // Returns 16%
width: percentage(100px / 50px); // Returns 200%</code>

Cette fonction gère gracieusement les unités, ce qui le rend idéal pour la mise à l'échelle typographique ou réactive.

Logique conditionnelle: la fonction if

La fonction en ligne de Sass

reflète les opérateurs ternaires: if

<code class="language-scss">$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);</code>

Il faut une condition et deux sorties potentielles. Ceci est inestimable pour la conception réactive, permettant aux propriétés de s'adapter en fonction des conditions variables ou des tailles d'écran.

Conclusion

Les fonctions intégrées de

SASS améliorent considérablement l'efficacité du style. Ces exemples, ainsi que d'autres (et ceux disponibles avec Compass), offrent une boîte à outils puissante pour créer des feuilles de style maintenables et adaptables. Expérimentez pour trouver le flux de travail qui convient le mieux à votre projet.

Des questions fréquemment posées sur les fonctions SASS

Cette section a été omise par la concision, car il s'agit d'un sujet distinct et augmenterait considérablement la durée de cette réponse déjà substantielle. Cependant, les informations fournies précédemment abordent directement la plupart des questions posées dans la section FAQ de l'entrée d'origine.

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!