Quelle est la différence entre CSS et SCSS?

Question

Je connais très bien CSS, mais je suis confus à propos de Sass. Quelle est la différence entre SCSS et CSS, et si j'utilise SCSS au lieu de CSS, cela fonctionnera-t-il de la même manière?

Answer 1

En plus de Idriss réponse:

CSS

En CSS, nous écrivons le code tel que décrit 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 @mixin afin de ne pas avoir à écrire encore et encore les propriétés color et width. Nous pouvons définir cela via une fonction, similaire à PHP ou à d'autres langages.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

TOUPET

Cependant, dans le SASS, la structure entière est visuellement plus rapide et plus propre que le SCSS.

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

• Il semble qu'il ne supporte pas les CSS en ligne actuellement.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

Answer 2

CSS est le langage de style que tout navigateur comprend pour styler les pages Web.

SCSS est un type de fichier spécial pour SASS, un programme écrit en Ruby qui assemble des feuilles de style CSS pour un navigateur et pour information. SASS ajoute de nombreuses fonctionnalités supplémentaires aux CSS, telles que écrire CSS plus facilement et plus rapidement. Les fichiers SCSS sont traités par le serveur exécutant une application Web pour générer un fichier CSS traditionnel que votre navigateur peut comprendre.

Answer 3

css a aussi 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);
}

Answer 4

Et c'est moins

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}