Je connais très bien CSS, mais je suis confus à propos de Sass. En quoi SCSS est-il différent de CSS, et si j'utilise SCSS au lieu de CSS, cela fonctionnera-t-il de la même manière?
Je connais très bien CSS, mais je suis confus à propos de Sass. En quoi SCSS est-il différent de CSS, et si j'utilise SCSS au lieu de CSS, cela fonctionnera-t-il de la même manière?
Réponses:
En plus de la réponse Idriss :
En CSS, nous écrivons le code comme illustré ci-dessous, en entier.
body{
width: 800px;
color: #ffffff;
}
body content{
width:750px;
background:#ffffff;
}
Dans SCSS, nous pouvons raccourcir ce code en utilisant un @mixin
afin de ne pas avoir à écrire color
et les width
propriétés encore et encore. Nous pouvons définir cela via une fonction, de la même manière que PHP ou d'autres langages.
$color: #ffffff;
$width: 800px;
@mixin body{
width: $width;
color: $color;
content{
width: $width;
background:$color;
}
}
Dans SASS cependant, toute la structure est visuellement plus rapide et plus propre que SCSS.
Il semble qu'il ne supporte pas actuellement le CSS en ligne.
$color: #ffffff
$width: 800px
$stack: Helvetica, sans-serif
body
width: $width
color: $color
font: 100% $stack
content
width: $width
background:$color
CSS est le langage de style que tout navigateur comprend pour styliser les pages Web.
SCSS est un type de fichier spécial pour SASS
, un programme écrit en Ruby qui assemble CSS
des feuilles de style pour un navigateur et, pour information, SASS
ajoute de nombreuses fonctionnalités supplémentaires pour CSS
aimer les variables, l'imbrication et plus encore, ce qui peut rendre l'écriture CSS
plus facile et plus rapide.
Les fichiers SCSS sont traités par le serveur exécutant une application Web pour générer une version traditionnelle CSS
que votre navigateur peut comprendre.
Et c'est moins
@primarycolor: #ffffff;
@width: 800px;
body{
width: @width;
color: @primarycolor;
.content{
width: @width;
background:@primarycolor;
}
}
Définition des variables à droite:
$ => SCSS, SASS
-- => CSS
@ => LESS
Toutes les réponses sont bonnes mais la question est un peu différente des réponses
"à propos de Sass. En quoi SCSS est-il différent de CSS" : scss est une syntaxe CSS3 bien formée . utilise un préprocesseur sass pour créer cela.
et si j'utilise SCSS au lieu de CSS, cela fonctionnera-t-il de la même manière? Oui. si votre ide prend en charge le préprocesseur sass. que cela fonctionnera de la même manière.
Sass a deux syntaxes. La syntaxe la plus couramment utilisée est connue sous le nom de «SCSS» (pour «Sassy CSS»), et est un sur-ensemble de la syntaxe de CSS3. Cela signifie que chaque feuille de style CSS3 valide est également un SCSS valide. Les fichiers SCSS utilisent l'extension .scss.
La seconde syntaxe, plus ancienne, est connue sous le nom de syntaxe indentée (ou simplement «.sass»). Inspiré de la concision de Haml, il est destiné aux personnes qui préfèrent la concision à la similitude avec CSS. Au lieu de crochets et de points-virgules, il utilise l'indentation des lignes pour spécifier des blocs. Les fichiers dans la syntaxe indentée utilisent l'extension .sass.
Qu'est-ce qu'un préprocesseur CSS?
Le CSS en lui-même est dépourvu de logique et de fonctionnalités complexes nécessaires pour écrire du code réutilisable et organisé. En conséquence, un développeur est lié par des limitations et ferait face à des difficultés extrêmes dans la maintenance du code et l'évolutivité, en particulier lorsqu'il travaille sur de grands projets impliquant un code étendu et plusieurs feuilles de style CSS. C'est là que les préprocesseurs CSS viennent à la rescousse.
Un préprocesseur CSS est un outil utilisé pour étendre les fonctionnalités de base du CSS vanilla par défaut via son propre langage de script. Cela nous aide à utiliser une syntaxe logique complexe comme - des variables, des fonctions, des mixins, l'imbrication de code et l'héritage pour n'en nommer que quelques-uns, en suralimentant votre CSS vanille. En utilisant des préprocesseurs CSS, vous pouvez automatiser de manière transparente les tâches subalternes, créer des extraits de code réutilisables, éviter la répétition et les ballonnements de code et écrire des blocs de code imbriqués bien organisés et faciles à lire. Cependant, les navigateurs ne peuvent comprendre que le code CSS vanilla natif et ne pourront pas interpréter la syntaxe du préprocesseur CSS. Par conséquent, la syntaxe complexe et avancée du préprocesseur doit d'abord être compilée dans la syntaxe CSS native qui peut ensuite être interprétée par les navigateurs pour éviter les problèmes de compatibilité entre navigateurs.
Dans la suite de cet article, nous examinerons les 3 préprocesseurs CSS les plus populaires actuellement utilisés par les développeurs du monde entier, à savoir Sass, LESS et Stylus. Avant de décider du gagnant entre Sass vs LESS vs Stylus, laissez-nous d'abord les connaître en détail.
Sass - Feuilles de style géniales sur le plan de la syntaxe
Sass est l'acronyme de «Syntactically Awesome Style Sheets». Sass est non seulement le préprocesseur CSS le plus populaire au monde, mais aussi l'un des plus anciens, lancé en 2006 par Hampton Catlin et développé plus tard par Natalie Weizenbaum. Bien que Sass soit écrit en langage Ruby, un précompilateur LibSass permet à Sass d'être analysé dans d'autres langues et de le dissocier de Ruby. Sass dispose d'une communauté active massive et de nombreuses ressources d'apprentissage disponibles sur le net pour les débutants. Grâce à sa maturité, sa stabilité et ses puissantes prouesses logiques, Sass s'est imposé à la pointe du préprocesseur CSS devant ses concurrents.
Sass peut être écrit en 2 syntaxes en utilisant Sass ou SCSS. Quelle est la différence entre les deux? Découvrons-le.
Déclaration de syntaxe: Sass vs SCSS
Considérez l'exemple ci-dessous avec la syntaxe Sass vs SCSS avec le code CSS compilé.
Sass SYNTAX
$font-color: #fff
$bg-color: #00f
#box
color: $font-color
background: $bg-color
SCSS SYNTAX
$font-color: #fff;
$bg-color: #00f;
#box{
color: $font-color;
background: $bg-color;
}
Dans les deux cas, que ce soit Sass ou SCSS, le code CSS compilé sera le même -
#box {
color: #fff;
background: #00f;
Utilisation de Sass
On peut dire que le framework frontal le plus populaire Bootstrap est écrit en Sass. Jusqu'à la version 3, Bootstrap était écrit en MOINS mais bootstrap 4 adoptait Sass et augmentait sa popularité. Quelques-unes des grandes entreprises utilisant Sass sont - Zapier, Uber, Airbnb et Kickstarter.
MOINS - Feuilles de style allégé
LESS est un acronyme pour «Leaner Stylesheets». Il a été publié en 2009 par Alexis Sellier, 3 ans après le lancement initial de Sass en 2006. Si Sass est écrit en Ruby, LESS est écrit en JavaScript. En fait, LESS est une bibliothèque JavaScript qui étend les fonctionnalités du CSS vanilla natif avec des mixins, des variables, une imbrication et une boucle d'ensemble de règles. Sass vs LESS a été un débat houleux. Il n'est pas surprenant que LESS soit le principal concurrent de Sass et possède la deuxième plus grande base d'utilisateurs. Cependant, lorsque bootstrap a largué LESS en faveur de Sass avec le lancement de Bootstrap 4, la popularité de LESS a diminué. L'un des rares inconvénients de LESS par rapport à Sass est qu'il ne prend pas en charge les fonctions. Contrairement à Sass, LESS utilise @ pour déclarer des variables susceptibles de créer une confusion avec @media et @keyframes. cependant, L'un des principaux avantages de LESS par rapport à Sass et Stylus ou à tout autre préprocesseur est la facilité de l'ajouter à votre projet. Vous pouvez le faire en utilisant NPM ou en incorporant le fichier Less.js. Déclaration de syntaxe: LESS Utilise l'extension .less. La syntaxe de LESS est assez similaire à SCSS à l'exception du fait que pour déclarer des variables, au lieu de $ sign, LESS utilise @.
@font-color: #fff;
@bg-color: #00f
#box{
color: @font-color;
background: @bg-color;
}
COMPILED CSS
#box {
color: #fff;
background: #00f;
}
Utilisation de LESS Le framework Bootstrap populaire jusqu'au lancement de la version 4 était écrit en LESS. Cependant, un autre framework populaire appelé SEMANTIC UI est toujours écrit en LESS. Parmi les grandes entreprises utilisant Sass figurent - Indiegogo, Patreon et WeChat
Style
Le stylet a été lancé en 2010 par l'ancien développeur de Node JS TJ Holowaychuk, près de 4 ans après la sortie de Sass et 1 an après la sortie de LESS. Le stylet est écrit Node JS et s'intègre parfaitement à la pile JS. Le stylet a été fortement influencé par les prouesses logiques du Sass et la simplicité de LESS. Même si Stylus est toujours populaire auprès des développeurs Node JS, il n'a pas réussi à se tailler une part importante. L'un des avantages du Stylus par rapport à Sass ou LESS est qu'il est doté de fonctions intégrées extrêmement puissantes et est capable de gérer des calculs lourds.
Déclaration de syntaxe: Stylus Utilise l'extension .styl. Stylus offre une grande flexibilité dans l'écriture de la syntaxe, prend en charge le CSS natif et permet l'omission des crochets deux-points et des points-virgules. Notez également que Stylus n'utilise pas les symboles @ ou $ pour définir les variables. Au lieu de cela, Stylus utilise les opérateurs d'affectation pour indiquer une déclaration de variable.
SYNTAXE DE STYLE ÉCRIT COMME LE CSS NATIF
font-color = #fff;
bg-color = #00f;
#box {
color: font-color;
background: bg-color;
}
OU
SYNTAXE DE STYLE SANS BRACELETS BOUCLÉS
font-color = #fff;
bg-color = #00f;
#box
color: font-color;
background: bg-color;
OU
SYNTAXE DE STYLE SANS COLONS ET SÉMICOLES
font-color = #fff
bg-color = #00f
#box
color font-color
background bg-color