Was ist der Unterschied zwischen CSS und SCSS?

Ich kenne CSS sehr gut, bin aber verwirrt über Sass. Wie unterscheidet sich SCSS von CSS, und wenn ich SCSS anstelle von CSS verwende, funktioniert es genauso?

Zusätzlich zu Idriss Antwort:

CSS

In CSS schreiben wir Code wie unten dargestellt in voller Länge.

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

SCSS

In SCSS können wir diesen Code mit a kürzen, @mixindamit wir nicht immer wieder schreiben colorund widthEigenschaften verwenden müssen. Wir können dies durch eine Funktion definieren, ähnlich wie bei PHP oder anderen Sprachen.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

In SASS ist die gesamte Struktur jedoch optisch schneller und sauberer als in SCSS.

• Es ist empfindlich gegenüber Leerzeichen, wenn Sie Kopieren und Einfügen verwenden.

• Es scheint, dass es derzeit kein Inline-CSS unterstützt.

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

CSS ist die Styling-Sprache, die jeder Browser versteht, um Webseiten zu stylen.

SCSS ist ein spezieller Dateityp für SASSein in Ruby geschriebenes Programm, das CSSStylesheets für einen Browser zusammenstellt und zur Information SASSviele zusätzliche Funktionen CSSwie Variablen, Verschachtelungen und mehr hinzufügt , die das Schreiben CSSeinfacher und schneller machen können.
SCSS-Dateien werden vom Server verarbeitet, auf dem eine Webanwendung ausgeführt wird, um eine traditionelle Datei auszugeben CSS, die Ihr Browser verstehen kann.

csshat auch Variablen. Sie können sie folgendermaßen verwenden:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Und das ist weniger

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Variablendefinitionen richtig:

$      => SCSS, SASS
--     => CSS
@      => LESS

Alle Antworten sind gut, aber die Frage ist etwas anders als die Antworten

"Über Sass. Wie unterscheidet sich SCSS von CSS ? " : scss ist eine wohlgeformte CSS3- Syntax. verwendet den sass-Präprozessor, um das zu erstellen.

und wenn ich SCSS anstelle von CSS verwende, funktioniert es dann genauso? Ja. Wenn Ihre Idee den Sass-Präprozessor unterstützt. als es wird gleich funktionieren.

Sass hat zwei Syntaxen. Die am häufigsten verwendete Syntax ist als "SCSS" (für "Sassy CSS") bekannt und ist eine Obermenge der CSS3-Syntax. Dies bedeutet, dass jedes gültige CSS3-Stylesheet auch ein gültiges SCSS ist. SCSS-Dateien verwenden die Erweiterung .scss.

Die zweite, ältere Syntax wird als eingerückte Syntax (oder einfach als ".sass") bezeichnet. Inspiriert von Hamls Knappheit ist es für Leute gedacht, die Prägnanz gegenüber Ähnlichkeit mit CSS bevorzugen. Anstelle von Klammern und Semikolons wird der Einzug von Zeilen verwendet, um Blöcke anzugeben. Dateien in der eingerückten Syntax verwenden die Erweiterung .sass.

• Weitere Informationen zu:

Was ist ein CSS-Präprozessor?

CSS an sich enthält keine komplexe Logik und Funktionalität, die zum Schreiben von wiederverwendbarem und organisiertem Code erforderlich ist. Infolgedessen ist ein Entwickler an Einschränkungen gebunden und würde mit extremen Schwierigkeiten bei der Codewartung und Skalierbarkeit konfrontiert sein, insbesondere wenn er an großen Projekten mit umfangreichem Code und mehreren CSS-Stylesheets arbeitet. Hier kommen CSS-Präprozessoren zur Rettung.

Ein CSS-Präprozessor ist ein Tool, mit dem die Grundfunktionalität von Standard-Vanilla-CSS durch eine eigene Skriptsprache erweitert wird. Es hilft uns, komplexe logische Syntax wie Variablen, Funktionen, Mixins, Code-Verschachtelung und Vererbung zu verwenden, um nur einige zu nennen, die Ihr Vanilla-CSS aufladen. Mit CSS-Präprozessoren können Sie einfache Aufgaben nahtlos automatisieren, wiederverwendbare Codefragmente erstellen, Codewiederholungen und Aufblähungen vermeiden und verschachtelte Codeblöcke schreiben, die gut organisiert und einfach zu lesen sind. Browser können jedoch nur nativen Vanille-CSS-Code verstehen und die CSS-Präprozessorsyntax nicht interpretieren. Daher muss die komplexe und erweiterte Präprozessorsyntax zunächst in native CSS-Syntax kompiliert werden, die dann von den Browsern interpretiert werden kann, um Probleme mit der Cross-Browser-Kompatibilität zu vermeiden.

In diesem Artikel werden wir uns die drei beliebtesten CSS-Präprozessoren ansehen, die derzeit von Entwicklern auf der ganzen Welt verwendet werden, z. B. Sass, LESS und Stylus. Bevor Sie den Gewinner zwischen Sass vs LESS vs Stylus bestimmen, lassen Sie uns diese zuerst im Detail kennenlernen.

Sass - Syntaktisch fantastische Stylesheets

Sass ist die Abkürzung für „Syntactically Awesome Style Sheets“. Sass ist nicht nur der beliebteste CSS-Präprozessor der Welt, sondern auch einer der ältesten, der 2006 von Hampton Catlin eingeführt und später von Natalie Weizenbaum entwickelt wurde. Obwohl Sass in Ruby geschrieben ist, ermöglicht ein Precompiler LibSass, dass Sass in anderen Sprachen analysiert und von Ruby entkoppelt wird. Sass verfügt über eine riesige aktive Community und umfangreiche Lernressourcen, die Anfängern im Internet zur Verfügung stehen. Dank seiner Reife, Stabilität und leistungsstarken logischen Fähigkeiten hat sich Sass vor seinen Konkurrenten an der Spitze des CSS-Präprozessors etabliert.

Sass kann in 2 Syntaxen entweder mit Sass oder SCSS geschrieben werden. Was ist der Unterschied zwischen den beiden? Lass es uns herausfinden.

Syntaxdeklaration: Sass vs SCSS

• SCSS steht für Sassy CSS. Im Gegensatz zu Sass basiert SCSS nicht auf Einrückungen.
• Die Erweiterung .sass wird als ursprüngliche Syntax für Sass verwendet, während SCSS eine neuere Syntax mit der Erweiterung .scss bietet.
• Im Gegensatz zu Sass hat SCSS genau wie CSS geschweifte Klammern und Semikolons.
• Im Gegensatz zu SCSS ist Sass schwer zu lesen, da es stark von CSS abweicht. Aus diesem Grund ist SCSS die am meisten empfohlene Sass-Syntax, da sie leichter zu lesen ist und dem nativen CSS sehr ähnlich ist, während sie gleichzeitig die Leistungsfähigkeit von Sass genießt.

Betrachten Sie das folgende Beispiel mit der Syntax Sass vs SCSS zusammen mit kompiliertem CSS-Code.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

In beiden Fällen, sei es Sass oder SCSS, ist der kompilierte CSS-Code derselbe -

#box {
      color: #fff;
      background: #00f;

Verwendung von Sass

Das wohl beliebteste Front-End-Framework Bootstrap ist in Sass geschrieben. Bis zur Version 3 wurde Bootstrap in WENIGER geschrieben, aber Bootstrap 4 übernahm Sass und steigerte seine Popularität. Einige der großen Unternehmen, die Sass einsetzen, sind - Zapier, Uber, Airbnb und Kickstarter.

WENIGER - schlankere Stylesheets

WENIGER ist eine Abkürzung für "Leaner Stylesheets". Es wurde 2009 von Alexis Sellier veröffentlicht, 3 Jahre nach dem ersten Start von Sass im Jahr 2006. Während Sass in Ruby geschrieben ist, ist LESS JavaScript geschrieben. Tatsächlich ist LESS eine JavaScript-Bibliothek, die die Funktionalität von nativem Vanilla-CSS mit Mixins, Variablen, Verschachtelung und Regelsatzschleife erweitert. Sass vs LESS war eine hitzige Debatte. Es ist keine Überraschung, dass LESS der stärkste Konkurrent von Sass ist und die zweitgrößte Nutzerbasis hat. Als Bootstrap mit dem Start von Bootstrap 4 WENIGER zugunsten von Sass ablegte, hat LESS an Popularität verloren. Einer der wenigen Nachteile von LESS gegenüber Sass ist, dass es keine Funktionen unterstützt. Im Gegensatz zu Sass verwendet LESS @, um Variablen zu deklarieren, die zu Verwechslungen mit @media und @keyframes führen können. Jedoch, Ein wesentlicher Vorteil von LESS gegenüber Sass und Stylus oder anderen Präprozessoren ist die einfache Hinzufügung zu Ihrem Projekt. Sie können dies entweder mithilfe von NPM oder durch Einbindung der Datei Less.js tun. Syntaxdeklaration : WENIGER Verwendet die Erweiterung .less. Die Syntax von LESS ist SCSS ziemlich ähnlich, mit der Ausnahme, dass LESS zum Deklarieren von Variablen anstelle von $ sign @ verwendet.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Verwendung von WENIGER Das beliebte Bootstrap-Framework bis zum Start von Version 4 wurde in WENIGER geschrieben. Ein anderes beliebtes Framework namens SEMANTIC UI ist jedoch noch in LESS geschrieben. Zu den großen Unternehmen, die Sass einsetzen, gehören Indiegogo, Patreon und WeChat

Stift

Der Stift wurde 2010 vom ehemaligen Node JS-Entwickler TJ Holowaychuk eingeführt, fast 4 Jahre nach der Veröffentlichung von Sass und 1 Jahr nach der Veröffentlichung von LESS. Der Stift ist Node JS geschrieben und passt perfekt zum JS-Stack. Der Stift wurde stark von den logischen Fähigkeiten des Sass und der Einfachheit von LESS beeinflusst. Obwohl Stylus bei Node JS-Entwicklern immer noch beliebt ist, ist es ihm nicht gelungen, einen beträchtlichen Anteil für sich selbst herauszuarbeiten. Ein Vorteil von Stylus gegenüber Sass oder LESS besteht darin, dass es mit extrem leistungsstarken integrierten Funktionen ausgestattet ist und schwere Computer verarbeiten kann.

Syntaxdeklaration: Stylus Verwendet die Erweiterung .styl. Stylus bietet ein hohes Maß an Flexibilität beim Schreiben von Syntax, unterstützt natives CSS und ermöglicht das Weglassen von Doppelpunkten und Semikolons in Klammern. Beachten Sie außerdem, dass Stylus keine @ oder $ -Symbole zum Definieren von Variablen verwendet. Stattdessen verwendet Stylus die Zuweisungsoperatoren, um eine Variablendeklaration anzugeben.

STYLUS SYNTAX SCHRIFTLICH WIE NATIVE CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

ODER

STYLUS SYNTAX OHNE CURLY BRACES

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

ODER

STYLUS SYNTAX OHNE KOLONEN UND SEMIKOLONEN

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color