Quelle est la différence entre sass et scss

Sass et scss sont deux syntaxes différentes fournies par le préprocesseur CSS Sass, les deux sont similaires et font la même chose, mais sont écrites dans des styles différents. SCSS est le dernier et considéré comme meilleur que Sass.

Découvrons d'abord les deux syntaxes différentes sass et scss fournies par le préprocesseur CSS Sass.

sass, également connu sous le nom de syntaxe d'indentation, est un langage de programmation similaire à Ruby.

Il provient d'un autre préprocesseur appelé Haml, inspiré de la simplicité de Haml, et est conçu et écrit par des développeurs Ruby, donc les feuilles de style Sass utilisent une syntaxe de type Ruby. No

sass est destiné à ceux qui préfèrent la simplicité similaire au CSS. Il utilise l'indentation de la ligne pour spécifier des blocs au lieu de parenthèses et de points-virgules, il y a donc des parenthèses, pas de points-virgules et une indentation stricte. Les fichiers dans la syntaxe sass utilisent l'extension .sass.

Exemple :

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius.my-element
  color= !primary-color
  width= 100%
  overflow= hidden.my-other-element
  +border-radius(5px)

Comme nous pouvons le voir, c'est tout un changement par rapport au CSS classique ! L'indicateur de variable est "!" et non "$", et le symbole d'affectation est "=", pas ":", ce qui est un peu étrange !

Mais voilà à quoi ressemblait Sass avant l'arrivée de la version 3.0 en mai 2010, après quoi Sassy CSS a introduit une toute nouvelle syntaxe appelée scss. Cette syntaxe vise à combler le fossé entre Sass et CSS en introduisant une syntaxe conviviale pour CSS.

scss, a une syntaxe similaire au CSS et est entièrement conforme aux normes CSS

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}
.my-other-element {
  @include border-radius(5px);
}

scss est nettement plus proche du CSS que du sass.

La différence entre scss et sass

La syntaxe Sass est similaire à Rubby, elle n'a pas de crochets Utilisation, pas d'indentation stricte, pas de point-virgule ; le symbole de la variable est "!" au lieu de "$", et le symbole d'affectation est "=" au lieu de " : ".

la syntaxe less est similaire à CSS, nécessitant l'utilisation d'accolades et de points-virgules ; le symbole de la variable est "$" et le symbole d'affectation est ":".

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!