Quelle est la différence entre CSS et SCSS?

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?

En plus de la réponse Idriss :

CSS

En CSS, nous écrivons le code comme illustré ci-dessous, en entier.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

Dans SCSS, nous pouvons raccourcir ce code en utilisant un @mixinafin de ne pas avoir à écrire coloret les widthproprié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;
 }
}

TOUPET

Dans SASS cependant, toute la structure est visuellement plus rapide et plus propre que SCSS.

• Il est sensible aux espaces blancs lorsque vous utilisez le copier-coller,

• 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 CSSdes feuilles de style pour un navigateur et, pour information, SASSajoute de nombreuses fonctionnalités supplémentaires pour CSSaimer les variables, l'imbrication et plus encore, ce qui peut rendre l'écriture CSSplus 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 CSSque votre navigateur peut comprendre.

cssa également des variables. Vous pouvez les utiliser comme ceci:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

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.

• Plus d'informations sur:

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

• SCSS signifie Sassy CSS. Contrairement à Sass, SCSS n'est pas basé sur l'indentation.
• L'extension .sass est utilisée comme syntaxe d'origine pour Sass, tandis que SCSS propose une syntaxe plus récente avec l'extension .scss.
• Contrairement à Sass, SCSS a des accolades et des points-virgules, tout comme CSS.
• Contrairement à SCSS, Sass est difficile à lire car il est assez différent du CSS. C'est pourquoi SCSS est la syntaxe Sass la plus recommandée car elle est plus facile à lire et ressemble étroitement au CSS natif tout en profitant de la puissance de Sass.

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