web-dev-qa-db-fra.com

Quelle est la différence entre SCSS et Sass?

D'après ce que j'ai lu, Sass est un langage qui rend CSS plus puissant avec un support variable et mathématique.

Quelle est la différence avec SCSS? Est-ce censé être le même langage? Similaire? Différent?

csssass
1682
bruno077

Sass est un pré-processeur CSS avec des améliorations de la syntaxe. Les feuilles de style dans la syntaxe avancée sont traitées par le programme et transformées en feuilles de style CSS standard. Cependant, ils ( ne développent pas le standard CSS lui-même.

Les variables CSS sont prises en charge et peuvent être utilisées, mais pas aussi bien que les variables de pré-processeur.

La différence entre SCSS et Sass, ce texte sur le page de documentation Sass devrait répondre à la question suivante:

Il existe deux syntaxes disponibles pour Sass. Le premier, appelé SCSS (Sassy CSS) et utilisé tout au long de cette référence, est une extension de la syntaxe de CSS. Cela signifie que chaque feuille de style CSS valide est un fichier SCSS valide ayant la même signification. Cette syntaxe est améliorée avec les fonctionnalités Sass décrites ci-dessous. Les fichiers utilisant cette syntaxe ont l'extension . Scss .

La seconde et ancienne syntaxe , appelée syntaxe indentée (ou parfois simplement "Sass"), fournit un moyen plus concis d’écrire CSS. Il utilise l'indentation plutôt que les crochets pour indiquer l'imbrication des sélecteurs et les nouvelles lignes plutôt que les points-virgules pour séparer les propriétés. Les fichiers utilisant cette syntaxe ont l'extension . Sass .

Cependant, tout cela ne fonctionne qu'avec le pré-compilateur Sass qui crée finalement CSS. Ce n'est pas une extension de la norme CSS elle-même.

1664
anon

Je suis l'un des développeurs qui ont aidé à créer Sass.

La différence est l'interface utilisateur. Sous l’extérieur textuel, ils sont identiques. C'est pourquoi les fichiers sass et scss peuvent s'importer l'un l'autre. En fait, Sass dispose de quatre analyseurs syntaxiques: scss, sass, CSS et moins. Tous ces éléments convertissent une syntaxe différente en un arbre de syntaxe abstraite , qui est ensuite traité en sortie CSS ou même sur l'un des autres formats via l'outil sass-convert.

Utilisez la syntaxe qui vous convient le mieux, les deux sont entièrement pris en charge et vous pourrez les changer ultérieurement si vous changez d'avis.

560
chriseppstein

Le fichier Sass .sass est visuellement différent du fichier .scss, par exemple.

Example.sass - sass est l'ancienne syntaxe

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css est la nouvelle syntaxe de Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Tout document CSS valide peut être converti en Sassy CSS (SCSS) simplement en remplaçant l'extension de .css par .scss.

336
Anthuan Vásquez

Sass ( StyleSheets syntaxiquement impressionnants ) ont deux syntaxes:

  • un plus récent: SCSS ( Sassy CSS )
  • et une syntaxe plus ancienne, originale: indent, qui correspond à l'original Sass et est également appelée Sass .

Ils font donc tous deux partie du préprocesseur Sass avec deux syntaxes différentes possibles.

La principale différence entre SCSS et l'original Sass :

SCSS:

  • La syntaxe est semblable à CSS (à tel point que chaque valeur valide régulière CSS3 est également valide SCSS, mais la relation dans l'autre sens ne se produit évidemment pas)

  • Utilise des accolades {}

  • Utilise des points-virgules ;
  • Le signe de l'affectation est :
  • Pour créer un mixin , il utilise la directive @mixin
  • Pour utiliser mixin , il est précédé de la directive @include
  • Les fichiers ont l'extension . Scss .

Original Sass :

  • La syntaxe est similaire à Ruby
  • Pas d'accolades
  • Pas d'indentation stricte
  • Pas de points-virgules
  • Le signe de l'affectation est = au lieu de :
  • Pour créer un mixin, il utilise le signe =
  • Pour utiliser mixin , il est précédé du signe +
  • Les fichiers ont l'extension . Sass .

Certains préfèrent Sass , la syntaxe originale - tandis que d'autres préfèrent SCSS. Quoi qu’il en soit, mais il convient de noter que la syntaxe en retrait de Sass n’a pas été et ne sera jamais déconseillée .

Conversions avec sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

RÉFÉRENCE SASS

90
simhumileco

Sa syntaxe est différente, et c'est le principal avantage (ou arnaque, selon votre perspective).

Je vais essayer de ne pas répéter une grande partie de ce que les autres ont dit, vous pouvez facilement le faire sur Google, mais j'aimerais plutôt dire quelques mots tirés de mon expérience en utilisant les deux, parfois même dans le même projet.

SASS pro

  • plus propre - si vous venez de Python, Ruby (vous pouvez même écrire des accessoires avec une syntaxe semblable à celle d'un symbole) ou même du monde CoffeeScript, cela vous viendra très naturellement - écrire des mixins, des fonctions et généralement tout objet réutilisable Le contenu de .sass est beaucoup plus facile à lire et lisible que dans .scss (subjectif).

contre SASS

  • les caractères sensibles aux espaces (subjectifs) ne me dérangent pas dans les autres langues, mais ici en CSS, cela ne me dérange pas (problèmes: copie, guerre entre tabulations et espace, etc.).
  • pas de règles en ligne (c’était ma façon de jouer), vous ne pouvez pas faire body color: red comme vous pouvez le faire en .scss body {color: red}
  • importer des éléments d'autres fournisseurs, copier des extraits Vanilla CSS - ce n'est pas impossible, mais très ennuyeux après un certain temps. La solution consiste à avoir les fichiers .scss (à côté des fichiers .sass) dans votre projet ou à les convertir en .sass.

Autre que cela - ils font le même travail.

Maintenant, ce que j'aime faire, c’est écrire des mixins et des variables dans .sass et du code qui sera compilé en CSS dans .scss si possible (c’est-à-dire que Visual Studio ne prend pas en charge .sass mais chaque fois que je travaille sur Rails projets, je combine généralement deux d’entre eux, pas dans un seul fichier).

Dernièrement, je songe à donner Stylus une chance (pour un préprocesseur CSS à temps plein), car cela vous permet de combiner deux syntaxes dans un fichier (parmi quelques autres fonctionnalités). Ce n'est peut-être pas une bonne direction à prendre pour une équipe, mais si vous la maintenez seule, c'est bon. Le stylet est en fait plus flexible lorsque la syntaxe est en cause.

Et enfin, mixin pour la comparaison de syntaxe .scss vs .sass:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover
78
Drops

De la page d'accueil de la langue

Sass a deux syntaxes. La nouvelle syntaxe principale (à partir de Sass 3) est connue sous le nom de "SCSS" (pour "Sassy CSS") et constitue 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 la plus ancienne est connue sous le nom de syntaxe indentée (ou simplement "Sass"). similitude avec CSS. Au lieu de crochets et de points-virgules, il utilise l'indentation de lignes pour spécifier des blocs. Bien que ce ne soit plus la syntaxe principale, la syntaxe indentée continuera à être prise en charge. Les fichiers dans la syntaxe indente utilisent l'extension .sass.

SASS est un langage interprété qui crache CSS. La structure de Sass ressemble à CSS (à distance), mais il me semble que la description est un peu trompeuse. c'est pas un remplacement pour CSS, ou une extension. C'est un interprète qui crache finalement du CSS, donc Sass a toujours les limitations du CSS normal, mais il les masque avec un code simple.

57
Blender

La différence fondamentale est la syntaxe. Alors que SASS a une syntaxe lâche avec des espaces et aucun point-virgule, le SCSS ressemble davantage à CSS.

21
designerNProgrammer

Sass était le premier et la syntaxe est un peu différente. Par exemple, y compris un mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignore les accolades et les points-virgules et pose sur l'imbrication, ce que j'ai trouvé plus utile.

13
user3522940

SASS signifie Syntactically Awesome StyleSheets. C'est une extension de CSS qui ajoute de la puissance et de l'élégance au langage de base. Le SASS a récemment été nommé SCSS avec quelques modifications, mais l'ancien SASS est également présent. Avant d’utiliser SCSS ou SASS, veuillez vous reporter à la différence ci-dessous.

enter image description here

Exemple de syntaxe SCSS et SASS

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Affiche le CSS après la compilation (identique pour les deux) 

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Pour plus de référence officielle site web

10
Srikrushna

Différence entre SASS et SCSS Cet article explique la différence de détail. Ne soyez pas déconcerté par les options SASS et SCSS, même si j’étais aussi au départ. .Scss est Sassy CSS et constitue la prochaine génération de .sass.

Si cela n’a pas de sens, vous pouvez voir la différence de code ci-dessous.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

Dans le code ci-dessus, nous utilisons; séparer les déclarations. J'ai même ajouté toutes les déclarations de .border sur une seule ligne pour illustrer davantage ce point. En revanche, le code SASS ci-dessous doit figurer sur différentes lignes avec une indentation et aucune utilisation du caractère;.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Vous pouvez voir dans le CSS ci-dessous que le style SCSS est beaucoup plus similaire au CSS normal que l'ancienne approche SASS.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Je pense que la plupart du temps, ces jours-ci, si quelqu'un mentionne qu'il travaille avec Sass, il fait référence à la création en .scss plutôt qu'à la manière traditionnelle .sass.

10
Shailesh Vikram Singh

Original sass est Ruby semblable à la syntaxe, semblable à Ruby, jade, etc.

Dans ces syntaxes, nous n'utilisons pas {}, nous utilisons plutôt des espaces blancs et aucune utilisation de ;...

Dans scss, les syntaxes ressemblent davantage à CSS, mais avec davantage d'options telles que: imbrication, déclaration, etc., similaires à less et à d'autres pré-traitements CSS ...

Ils font fondamentalement la même chose, mais je mets quelques lignes de chacune pour voir la différence de syntaxe. Regardez le {}, ; et spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}
10
Alireza

Réponse compacte:

SCSS désigne la syntaxe principale prise en charge par le pré-processeur Sass CSS.

  • Les fichiers se terminant par .scss représentent la syntaxe standard prise en charge par Sass. SCSS est un sur-ensemble de CSS.
  • Les fichiers se terminant par .sass représentent la syntaxe "plus ancienne" prise en charge par Sass provenant du monde Ruby.
4
matthias