Wat is het verschil tussen CSS en SCSS?

Ik ken CSS heel goed, maar ben in de war over Sass. Waarin verschilt SCSS van CSS, en als ik SCSS gebruik in plaats van CSS, werkt het dan hetzelfde?

Antwoord 1, autoriteit 100%

In aanvulling op Idrissantwoord:

CSS

In CSS schrijven we code zoals hieronder afgebeeld, in volledige lengte.

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

SCSS

In SCSS kunnen we deze code inkorten met een @mixinzodat we de eigenschappen coloren widthniet steeds opnieuw hoeven te schrijven . We kunnen dit definiëren via een functie, vergelijkbaar met PHP of andere talen.

$color: #ffffff;
$width: 800px;
@mixin body{
 width: $width;
 color: $color;
 content{
  width: $width;
  background:$color;
 }
}

SASS

In SASS is de hele structuur echter visueel sneller en schoner dan SCSS.

• Het is gevoelig voor witruimte wanneer je kopieert en plakt,

• Het lijkt erop dat het momenteel geen inline CSS ondersteunt.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  body
    width: $width
    color: $color
    font: 100% $stack
    content
      width: $width
      background:$color
  

Antwoord 2, autoriteit 28%

CSSis de stijltaal die elke browser begrijpt om webpagina’s te stylen.

SCSSis een speciaal type bestand voor SASS, een programma geschreven in Ruby dat css-stijlbladen voor een browser samenstelt, en voor informatie, voegt SASSveel extra functionaliteit toe aan csszoals variabelen, nesten en meer, waardoor het schrijven van cssgemakkelijker en sneller kan worden gemaakt.
SCSS-bestandenworden verwerkt door de server waarop een web-app wordt uitgevoerd om een traditionele cssuit te voeren die uw browser kan begrijpen.

Antwoord 3, autoriteit 21%

cssheeft ook variabelen. Je kunt ze als volgt gebruiken:

--primaryColor: #ffffff;
--width: 800px;
body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Antwoord 4, autoriteit 4%

En dit is minder

@primarycolor: #ffffff;
@width: 800px;
body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Antwoord 5

Sass is een taal die functies biedt die het gemakkelijker maken om met complexe styling om te gaan in vergelijking met het bewerken van onbewerkte .css. Een voorbeeld van zo’n functie is het definiëren van variabelen die hergebruikt kunnen worden in verschillende stijlen.

De taal heeft twee alternatieve syntaxis:

• Een JSON-achtige syntaxis die wordt bewaard in bestanden die eindigen op .scss
• Een YAML-achtige syntaxis die wordt bewaard in bestanden die eindigen op .sass

Een van deze moet worden gecompileerd naar .css-bestanden die door browsers worden herkend.

Zie https://sass-lang.com/voor meer informatie.