Qu'est-ce que Sass? Votre guide de ce premier préprocesseur CSS

Qu
(Crédit d'image: Sass)

Qu'est-ce que Sass? C'est la question à laquelle nous sommes ici pour répondre. Si vous êtes nouveau dans la conception Web, vous avez probablement entendu le terme flotter, mais vous n'êtes peut-être pas tout à fait au courant de ce qu'est Sass, de ce qu'il fait et de savoir si vous devriez l'utiliser ou non. En bref, Sass est un préprocesseur CSS, qui ajoute des fonctionnalités spéciales telles que des variables, des règles imbriquées et des mixins (parfois appelés sucre syntaxique) dans le CSS ordinaire. L'objectif est de rendre le processus de codage plus simple et plus efficace. Explorons plus en détail.

Pour plus d'outils, explorez notre guide du meilleurs frameworks CSS et le top outils de conception web essayer.

Qu'est-ce qu'un préprocesseur CSS?

Un préprocesseur CSS est un langage de script qui étend CSS en permettant aux développeurs d'écrire du code dans un langage, puis de le compiler en CSS. Toupet est peut-être le préprocesseur le plus populaire actuellement, mais d'autres exemples bien connus incluent Moins et Style .



Avant d'aller plus loin, une rapide annonce de service public s'impose: la plupart des concepteurs Web diront que si vous êtes nouveau dans CSS, il vaut mieux éviter Sass (ou tout préprocesseur, extensions ou frameworks) pendant que vous êtes encore apprentissage. S'il est vrai qu'ils offrent de nombreux avantages en termes de rapidité et d'efficacité, il est important que vous vous familiarisiez vraiment avec les bases du CSS. Assurez-vous d'apprendre les concepts de base avant de commencer à explorer les raccourcis et les choses déroutantes.

Qu'est-ce que Sass?

toupet

Sass est sans doute la plus utile de toutes les extensions CSS

Sass (qui signifie `` Feuilles de style syntaxiquement géniales '') est une extension de CSS qui vous permet d'utiliser des éléments tels que des variables, des règles imbriquées, des importations en ligne et plus encore. Cela aide également à garder les choses organisées et vous permet de créer des feuilles de style plus rapidement.

Sass est compatible avec toutes les versions de CSS. La seule condition requise pour l'utiliser est que Ruby doit être installé. Les utilisateurs sont également invités à suivre les Règlement de la communauté Sass .

Comment utiliser Sass

Dans la section suivante, nous présenterons quelques conseils de base pour l'utilisation de Sass, en utilisant des exemples du site Web officiel de Sass. Jetez un œil au Documentation Sass pour des références et des exemples supplémentaires.

Syntaxe

Sass comprend deux options de syntaxe:

  • SCSS (CSS impertinent): Utilise le .scss extension de fichier et est entièrement compatible avec la syntaxe CSS
  • Indenté (simplement appelé 'Sass'): Les usages .toupet extension de fichier et indentation plutôt que crochets; il n'est pas entièrement compatible avec la syntaxe CSS, mais il est plus rapide à écrire

Notez que les fichiers peuvent être convertis d'une syntaxe à l'autre en utilisant le sass-convertir commander.

Variables

Tout comme les autres langages de programmation, Sass permet l'utilisation de variables qui peuvent stocker des informations que vous pouvez utiliser tout au long de votre feuille de style. Par exemple, vous pouvez stocker une valeur de couleur dans une variable en haut du fichier, puis utiliser cette variable lors de la définition de la couleur de vos éléments. Cela vous permet de changer rapidement vos couleurs sans avoir à modifier chaque ligne séparément.

Par exemple:

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Le CSS suivant sera produit:

body { font: 100% Helvetica, sans-serif; color: #333; }

Nesting

La nidification est une épée à double tranchant. Bien qu'il constitue une excellente méthode pour réduire la quantité de code à écrire, il peut également conduire à un CSS surqualifié s'il n'est pas exécuté avec soin. L'idée est d'imbriquer vos sélecteurs CSS de manière à imiter votre hiérarchie HTML.

Ce qui suit montre un style de navigation de base qui utilise l'imbrication:

nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

La sortie CSS est la suivante:

nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

Partiels

Les partiels sont des fichiers Sass plus petits qui peuvent être importés (voir la section suivante) dans d'autres fichiers Sass. Considérez les partiels comme des extraits de code. Avec ces extraits de code, votre CSS peut désormais être modulaire et plus facile à maintenir. Un partiel est désigné comme tel en le nommant avec un trait de soulignement au début: _partial.scss .

Importer

Utilisé avec les partiels (voir section précédente), le @importer directive vous permet d'importer vos fichiers partiels dans le fichier courant, pour créer un seul fichier CSS. N'oubliez pas le nombre d'importations que vous utilisez comme requête HTTP qui sera générée pour chacune d'entre elles.

// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }// basefile.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Et la sortie CSS correspondante:

html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Remarque: lors de l'importation de partiels, vous n'avez pas besoin d'inclure l'extension de fichier ou le trait de soulignement.

Mixins

L'un des avantages de l'utilisation de préprocesseurs est leur capacité à prendre du code complexe et long et à le simplifier. C'est là que les mixins sont utiles!

Par exemple, si vous devez inclure les préfixes du fournisseur, vous pouvez utiliser un mixin à la place. Jetez un œil à cet exemple pour rayon de bordure :

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

Remarquez le @mixin directive au sommet. On lui a donné le nom rayon de bordure et utilise la variable $ rayon comme paramètre. Cette variable est utilisée pour définir la valeur du rayon pour chaque élément.

Plus tard, le @comprendre la directive est appelée, avec le nom du mixin ( rayon de bordure ) et un paramètre ( 10px ). Ainsi .box {@include border-radius (10px); } .

Le CSS suivant est produit:

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Prolonger / Héritage

Le @étendre directive a été appelée l'une des fonctionnalités les plus puissantes de Sass. Après l'avoir vu en action, on comprend pourquoi.

L'idée est qu'avec cette directive, vous n'aurez pas à inclure plusieurs noms de classe sur vos éléments HTML et vous pourrez garder votre code DRY (ne vous répétez pas). Vos sélecteurs peuvent hériter des styles d'autres sélecteurs, puis être facilement étendus si nécessaire. Maintenant c'est puissant.

Les opérateurs

Avoir la possibilité d'effectuer des calculs dans votre CSS vous permet d'en faire plus, comme convertir les valeurs de pixels en pourcentages. Vous aurez accès aux fonctions mathématiques standard comme l'addition, la soustraction, la multiplication et la division. Bien entendu, ces fonctions peuvent être combinées pour créer des calculs complexes.

De plus, Sass comprend quelques fonctions intégrées pour aider à manipuler les nombres. Fonctions comme pourcentage() , étage() et rond() pour n'en nommer que quelques-uns.

Lire la suite: