Outils pour utilisateurs

Outils du site


scssvscss

Différence entre CSS et le SCSS

Le .css est un langage utilisé lorsque que l’on veut mettre du style dans un site Web, mais qu’en est-il du .scss ? Qu’est ce que le scss exactement ?

Pour commencer, pour bien comprendre qu’est-ce qu’est le scss, il est nécessaire d’expliquer ce qu’il est exactement. Il est aussi possible d’appeler le scss « Sass », les deux termes sont équivalent, ce n’est qu’un choix personnel qui détermine lequel utiliser. Tout d’abord, Sass est un programme conçu en Ruby. En effet, le scss est un type de ficher spécial qui découle de Sass. Ce programme a la fonctionnalité d’assemblé ensemble plusieurs feuilles de styles CSS, alors que type de ficher avec comme extension le .scss permet d’ajouter des fonctionnalités au CSS normal. Le but principal du SASS et donc du scss est la règle du DRY (Don’t repeat yourself), ou en français « ne pas se répéter soi-même ». Bien que le scss a plusieurs fonctions très utiles, un portrait sommaire sera fait, avec les fonctionnalités que je trouve les plus utiles selon moi.

Premièrement, un d’un plus grand avantage à utiliser le scss serai selon moi l’implémentation des « @mixins ». Une mixin est comparable à une fonction ordinaire dans d’autre langage. Elles peuvent contenir des règles Css complètes, mais elles ont aussi la capacité de contenir des arguments. Cependant, bien que la limite de la puissance des mixins est l’imagination, il est conseiller de garder cela simple. Une vingtaine de lignes devraient être le maximum pour une mixin. Habituellement, on les utilise pour regrouper quelques lignes Css qui se répète toujours ensemble, par exemple celle-ci pour enlever les éléments flottants après un bloc :

mixin.jpg

Pour appeler une mixin créer, il suffit d’écrire dans notre fichier « @include nomMixin (arguments, si, nessaire) » et le tour est jouer !

Deuxièmement, une autre fonctionnalité du Sass serai la possibilité que créer des variables. Lorsque qu’une variable est créée, elle sera alors disponible dans l’ensemble des fichiers du site, et non pas relative au fichier seulement où elle est déclarée. Par exemple, la couleur primaire de votre site Web sera #45AF2E, il suffit d’assigner votre couleur à votre variable et ainsi appeler la dite variable dans tout votre projet. Il est aussi important de savoir qu’une variable peux contenir non seulement des couleurs, mais aussi des largeurs/hauteurs, line-height, point en pixel… En bref, toute propriété Css. Pour déclarer une variable, il est nécessaire d’inscrire avant le nom de celle-ci le caractère « $ ». Par exemple :

variable.jpg

Troisièmement, une autre fonctionnalité que je trouve particulièrement utile avec le Scss est l’indentation du code. En effet, dans le Css normal, il est impossible d’intégré à l’intérieur d’une balise Html une autre balise Html. Toutefois, cela est possible avec Sass, ce qui de mon avis offre du code plus lisible et facile d’atteinte. Voici un exemple :

indentation.jpg

Dans ce cas, nous donnons un style de base à un bouton, puis à l’intérieur de celui-ci nous stylisons aussi la propriété « hover » dans la même balise, qui est le « .btn-primary ». Cela peux sembler bien simple, mais c’est en l’utilisant qu’il est possible d’apprécier pleinement ce petit avantage.

En résumé, le Scss est un méta-langage pour améliorer la syntaxe Css afin d’offrir des fonctionnalités supplémentaires et des outils pratiques. Il permet de simplifier la vie des programmeurs et désigner Web, bien qu’il est toujours possible d’utiliser simplement le Css.

scssvscss.txt · Dernière modification: 2019/06/05 00:51 par 1540929