Question Quelle est la différence entre SCSS et Sass?


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

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


1332
2018-04-13 19:23


origine


Réponses:


Sass est un pré-processeur CSS avec des avancements de syntaxe. Les feuilles de style dans la syntaxe avancée sont traitées par le programme et transformées en feuilles de style CSS régulières. Cependant, ils font ne pas étendre le standard CSS lui-même.

La principale raison en est l'ajout de fonctionnalités qui manque cruellement à CSS (comme les variables).

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

Il y a deux syntaxes disponibles pour Sass. Le premier, connu sous le nom de 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 le .scss extension.

Le deuxième et ancienne syntaxe, connu sous le nom de syntaxe indentée (ou parfois juste "Sass"), fournit une manière plus concise d'écrire du CSS. Il utilise l'indentation plutôt que les parenthèses 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 le .toupet extension.

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.


1358
2018-04-13 19:25



Je suis l'un des développeurs qui a 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 mutuellement. En fait, Sass a quatre analyseurs de syntaxe: scss, sass, CSS et moins. Tous ces éléments convertissent une syntaxe différente en 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 que vous aimez le mieux, les deux sont entièrement pris en charge et vous pouvez changer entre eux plus tard si vous changez d'avis.


480
2018-04-20 15:16



Le Sass .sass le fichier est visuellement différent de .scss fichier, par ex.

example.sass

$color: red

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

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

example.scss

$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 changeant l'extension de .css à .scss.


264
2017-11-30 03:05



Sa syntaxe est différente, et c'est le pro principal (ou con, 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 google cela mais à la place, je voudrais dire quelques choses de mon expérience en utilisant les deux, parfois même dans le même projet.

SASS pro 

  • nettoyeur - si vous venez de Python, Ruby (vous pouvez même écrire des accessoires avec une syntaxe symbolique) ou même le monde de CoffeeScript, il vous sera très naturel - d'écrire des mixins, des fonctions et en général des choses réutilisables dans .sassest beaucoup plus facile et lisible que dans .scss (subjectif).

SASS contre

  • espace sensible (subjectif), cela ne me dérange pas dans d'autres langues mais ici en CSS ça me gêne (problèmes: copie, tab vs guerre spatiale, etc).
  • pas de règles en ligne (ce fut le jeu de rupture pour moi), vous ne pouvez pas faire body color: red comme vous pouvez dans .scss body {color: red}
  • l'importation d'autres choses du vendeur, la copie des extraits CSS vanilla - pas impossible mais très ennuyeux après un certain temps. La solution est soit d'avoir .scss fichiers (avec .sass fichiers) dans votre projet ou pour les convertir en .sass.

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

Maintenant, ce que j'aime faire est d'écrire des mixins et des variables .sass et le code qui compilera réellement à CSS dans .scss si possible (Visual Studio n'a pas de support pour .sass mais chaque fois que je travaille sur des projets Rails, je combine généralement deux d'entre eux, pas dans un fichier de C).

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

Et enfin mixin pour .scss contre .sass comparaison de syntaxe:

// 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

57
2018-05-13 14:16



Du page d'accueil de la langue

Sass a deux syntaxes. Le nouveau principal   la syntaxe (à partir de Sass 3) est connue comme   "SCSS" (pour "Sassy CSS")et est un   superset de la syntaxe de CSS3. Ça signifie   que chaque feuille de style CSS3 valide est   SCSS valide aussi. Les fichiers SCSS utilisent le   extension .scss.

La deuxième syntaxe plus ancienne est connue sous le nom de   la syntaxe indentée (ou juste "Sass").   Inspiré par la lacune de Haml, c'est   destiné aux personnes qui préfèrent   concision sur la similitude avec CSS.   Au lieu de crochets et de points-virgules, il   utilise l'indentation des lignes à   spécifier des blocs. Bien que n'étant plus le   syntaxe primaire, la syntaxe indentée   continuera à être soutenu. Des dossiers   dans la syntaxe en retrait utiliser le   extension .sass.

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


45
2018-04-13 19:27



Toupet (StyleSheets syntaxiquement génial) ont deux syntaxes:

  • un nouveau, un débutant: SCSS (Sassy CSS)
  • et une syntaxe plus ancienne, originale: indent, qui est l'original Toupet et est également appelé Toupet.

Donc, ils font tous deux partie de Toupet préprocesseur avec deux syntaxes possibles différentes.

Les différences les plus importantes entre SCSS et original Toupet:

SCSS:

  • Sa syntaxe est similaire à CSS.
  • Utiliser des accolades {}.
  • Utiliser des points-virgules ;.
  • Connexion variable SCSS est $.
  • Aassignment signez SCSS est :.
  • Les fichiers utilisant cette syntaxe ont le .scss extension.

Original Toupet:

  • Sa syntaxe est similaire à Rubis.
  • Ici pas d'utilisation d'accolades.
  • Pas d'indentation stricte.
  • Pas de demi-colon.
  • Connexion variable Toupet est ! au lieu de $.
  • Signe d'affectation Toupet est = au lieu de :.
  • Les fichiers utilisant cette syntaxe ont le .toupet extension.

Ce sont deux syntaxes disponibles pour Toupet.

Certains préfèrent Toupet, la syntaxe originale - tandis que d'autres préfèrent SCSS. De toute façon, mais il vaut la peine de noter que Sass la syntaxe indentée 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

SASS RÉFÉRENCE


37
2018-04-10 11:16



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


18
2018-05-06 10:36



Original sass est semblable à la syntaxe ruby, similaire à ruby, jade etc ...

Dans ces syntaxes, nous n'utilisons pas {}, à la place nous allons avec des espaces blancs, aussi pas d'utilisation de ;...

Dans scss les syntaxes sont plus comme CSS, mais avec plus d'options comme: imbrication, déclaration, etc, similaire à less et autre pré-traitement CSS ...

Ils font essentiellement la même chose, mais je mets quelques lignes de chaque pour voir la différence de syntaxe, regardez le {}, ;, et spaces:

TOUPET:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

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

9
2017-07-02 04:51



Sass était le premier, et La syntaxe est un peu différente. Par exemple, en incluant un mixin:

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

Sass ignore les parenthèses bouclées et les points-virgules et se repose sur l'emboîtement, que j'ai trouvé plus utile.


8
2018-04-11 13:25