Wat is het verschil tussen SCSS en Sass?

Van wat ik heb gelezen, is Sass een taal die CSS krachtiger maakt met ondersteuning voor variabelen en wiskunde.

Wat is het verschil met SCSS? Moet het dezelfde taal zijn? Vergelijkbaar? Anders?

Antwoord 1, autoriteit 100%

Sass is een CSS-preprocessor met verbeterde syntaxis. Stylesheets in de geavanceerde syntaxis worden door het programma verwerkt en omgezet in gewone CSS-stylesheets. Ze breiden echter nietde CSS-standaard zelf uit.

CSS-variabelen worden ondersteund en kunnen worden gebruikt, maar niet zo goed als pre-processorvariabelen.

Voor het verschil tussen SCSS en Sass, deze tekst op de Sass-documentatiepaginazou de vraag moeten beantwoorden:

Er zijn twee syntaxis beschikbaar voor Sass. De eerste, bekend als SCSS (Sassy CSS)en die in deze referentie wordt gebruikt, is een uitbreiding van de syntaxis van CSS. Dit betekent dat elke geldige CSS-stylesheet een geldig SCSS-bestand is met dezelfde betekenis. Deze syntaxis is verbeterd met de hieronder beschreven Sass-functies. Bestanden die deze syntaxis gebruiken, hebben de extensie .scss.

De tweede en oudere syntaxis, bekend als de indented syntax (or sometimes just “Sass”), biedt een beknoptere manier om CSS schrijven. Het gebruikt inspringing in plaats van haakjesom het nesten van selectors aan te geven, en nieuwe regels in plaats van puntkomma’som eigenschappen te scheiden. Bestanden die deze syntaxis gebruiken, hebben de extensie .sass.

Echter, all this works only with the Sass pre-compilerdie uiteindelijk CSS creëert. Het is geen uitbreiding op de CSS-standaard zelf.

Antwoord 2, autoriteit 32%

Ik ben een van de ontwikkelaars die Sass heeft helpen maken.

Het verschil is de syntaxis. Onder de tekstuele buitenkant zijn ze identiek. Dit is de reden waarom sass- en scss-bestanden elkaar kunnen importeren. Sass heeft eigenlijk vier syntaxis-parsers: scss, sass, CSS en minder. Deze zetten allemaal een andere syntaxis om in een Abstracte syntaxisboomdie verder wordt verwerkt tot CSS-uitvoer of zelfs naar een van de andere formaten via de sass-convert tool.

Gebruik de syntaxis die u het beste bevalt, beide worden volledig ondersteund en u kunt er later tussen wisselen als u van gedachten verandert.

Antwoord 3, autoriteit 19%

Het Sass .sass-bestand is visueel anders dan het .scss-bestand, bijvoorbeeld

Voorbeeld.sass – sass is de oudere syntaxis

$color: red
=my-border($color)
  border: 1px solid $color
body
  background: $color
  +my-border(green)

Voorbeeld.scss – sassy css is de nieuwe syntaxis vanaf Sass 3

$color: red;
@mixin my-border($color) {
  border: 1px solid $color;
}
body {
  background: $color;
  @include my-border(green);
}

Elk geldig CSS-document kan worden geconverteerd naar Sassy CSS (SCSS) door simpelweg de extensie te wijzigen van .cssin .scss.

Antwoord 4, autoriteit 4%

De syntaxis is anders, en dat is het belangrijkste voordeel (of nadeel, afhankelijk van uw perspectief).

Ik zal proberen niet veel te herhalen van wat anderen zeiden, dat kun je gemakkelijk googlen, maar in plaats daarvan wil ik een paar dingen zeggen uit mijn ervaring met beide, soms zelfs in hetzelfde project.

SASS pro

• cleaner – als je van Python, Ruby komt (je kunt zelfs rekwisieten schrijven met symboolachtige syntaxis) of zelfs de CoffeeScript-wereld, zal het heel natuurlijk voor je zijn – mixins, functies en in het algemeen alle herbruikbare dingen schrijven in .sassis veel ‘gemakkelijker’ en leesbaar dan in .scss(subjectief).

SASS nadelen

• gevoelig voor witruimte (subjectief), ik vind het niet erg in andere talen, maar hier in CSS stoort het me gewoon (problemen: kopiëren, tab versus ruimteoorlog, enz.).
• geen inline-regels (dit was spelbrekend voor mij), je kunt body color: redniet doen zoals in .scss body {color: red}
• dingen van andere leveranciers importeren, vanille-CSS-fragmenten kopiëren – niet onmogelijk, maar na een tijdje erg saai. De oplossing is om ofwel .scssbestanden (samen met .sassbestanden) in uw project te hebben of ze te converteren naar .sass.

Anders dan dit, doen ze hetzelfde werk.

Wat ik nu graag doe, is mixins en variabelen schrijven in .sassen code die indien mogelijk daadwerkelijk naar CSS wordt gecompileerd in .scss(bijv. Visual studio heeft geen ondersteuning voor .sassmaar wanneer ik aan Rails-projecten werk, combineer ik er meestal twee, niet in één bestand ofc).

De laatste tijd overweeg ik om Styluseen kans te geven (voor een fulltime CSS-preprocessor) omdat je hiermee twee syntaxis in één bestand kunt combineren (naast enkele andere functies). Dat is misschien geen goede richting voor een team om te nemen, maar als je het alleen onderhoudt, is het oké. De stylus is eigenlijk het meest flexibel als het om syntaxis gaat.

En tot slot mixen voor .scssvs .sasssyntaxisvergelijking:

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

5

Het basisverschil is de syntaxis. Hoewel Sass een losse syntaxis met witte ruimte heeft en geen puntkomma’s, lijkt de SCSS meer op CSS.

6

Sass was de eerste, en de syntaxis is een beetje anders.
Bijvoorbeeld, inclusief een mixin:

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

Sass negeert krullende beugels en puntkomma’s en lag op nesten, die ik nuttiger vond.

7

verschil tussen Sass en SCSS Artikel verklaart het verschil in details. Wees niet in de war door de SASS- en SCSS-opties, hoewel ik aanvankelijk aanvankelijk was, is .scss Sassy CSS en is de volgende generatie van .Sass.

Als dat niet logisch is, kunt u het verschil in de onderstaande code zien.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}
.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

in de bovenstaande code die we gebruiken; om de aangiften te scheiden. Ik heb zelfs alle aangiften toegevoegd voor .border op een enkele regel om dit punt verder te illustreren.
Daarentegen moet de sass-code hieronder op verschillende lijnen zijn met inkeping en er is geen gebruik van de;

/* SASS */
$blue: #3bbfce
$margin: 16px
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

U kunt zien van de CSS hieronder die de SCSS-stijl veel meer vergelijkbaar is met reguliere CSS dan de oudere sass-aanpak.

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

Ik denk het grootste deel van de tijd tegenwoordig als iemand vermeldt dat ze met SASS werken, ze verwijzen naar authoring in .scss in plaats van de traditionele .sass-manier.

8

Origineel sassIs Ruby Syntaxis-like, vergelijkbaar met Ruby, Jade enz …

In die syntaxis gebruiken we niet {}, in plaats daarvan gaan we met witte ruimtes, ook geen gebruik van ;…

In scssSYNTAXES zijn meer op CSS, maar met meer opties zoals: nesten, verklaren, enz., Vergelijkbaar met lessen andere Pre-verwerking CSS…

Ze doen eigenlijk hetzelfde, maar ik stop een paar lijnen van elk om het syntaxverschil te zien, kijk naar de {}, ;en spaces:

sass:

$width: 100px
$color: green
div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;
div {
  width: $width;
  background-color: $color;
}

9

Het compacte antwoord:

SCSS verwijst naar de hoofdsyntaxis ondersteund door de Pre-processor van Sass CSS .

• -bestanden die eindigen met .scssvertegenwoordigen de standaardsyntaxis die wordt ondersteund door Sass. SCSS is een superset van CSS.
• Bestanden die eindigen met .sassWeerwoord de “oudere” syntaxis die wordt ondersteund door SASS van oorsprong uit de Ruby World.

10

Sass is syntactisch geweldige stijlbladen en is een uitbreiding van CSS die de kenmerken van geneste regels, erfenis, mixen, sassy gecascadeerde stijlplaten is die vergelijkbaar is met die van CSS en vult de hiaten en incompatibiliteit tussen CSS en SASS en Sass en Sassa’s . Het was in licentie gegeven onder de MIT-licentie.
Dit artikel heeft meer over de verschillen: https://www.educba.com/sass-vs- SCSS /

11

SCSS is de nieuwe syntaxis voor SASS. In extensie verstandig, .Sass voor de SASS terwijl .scss voor de SCSS. Hier heeft SCSS meer logische en complexe aanpak voor codering dan SASS.
Daarom is voor een newbie naar softwareveld de betere keuze SCSS.

12

Ik vond dat ik mezelf afvroeg, en struikelde op een rechtstreeks uitleg in CS50 van Harvard:

Een taal genaamd Sass … (is) in wezen een uitbreiding van CSS … het voegt extra functies toe aan CSS … om het een beetje krachtiger te maken voor ons om te gebruiken.

Een van de belangrijkste kenmerken van SASS is de mogelijkheid om variabelen te gebruiken

De SASS-extensie is .scss(in tegenstelling tot .cssvoor een normaal CSS-bestand).

Dus wanneer we het vragen “wat is het verschil tussen SCSS en SASS?” – Het antwoord kan eenvoudig zijn dat .scss eenvoudigweg de bestandsextensie is die wordt gebruikt bij het wensen van SASS in plaats van reguliere CSS.