Quelle est la différence entre CSS et HTML ?

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 d' Idriss réponse:

CSS

En CSS, nous écrire du code comme décrit ci-dessous, en pleine longueur.

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

SCSS

En SCSS nous pouvons raccourcir ce code à l'aide d'un @mixin afin de ne pas avoir à écrire color et width propriétés encore et encore. Nous pouvons définir ce au travers d'une fonction, à l'instar de PHP ou d'autres langues.

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

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

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

SASS

Dans SASS cependant, la structure de l'ensemble est visuellement plus rapide et plus propre que SCSS.

• Il est sensible à l'espace blanc lorsque vous utilisez le copier-coller,

• Il semble qu'il ne prend pas en charge CSS 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. Pour information, le SASS ajoute de nombreuses fonctionnalités supplémentaires aux variables CSS, telles que les variables, les imbrications, etc. 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 é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);
}
 

Answer 4

Et c'est moins

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

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