Die 40 wichtigsten Fragen und Antworten zu SASS-Interviews (2025)

Hier finden Sie Fragen und Antworten zu SASS- und SCSS-Interviews für Studienanfänger und erfahrene Kandidaten, die ihren Traumjob bekommen möchten.

1) Erklären Sie, was Sass ist? Wie kann es verwendet werden?

Sass steht für Syntactically Awesome Stylesheets und wurde von Hampton Catlin erstellt. Es handelt sich um eine Erweiterung von CSS3, die verschachtelte Regeln, Mixins, Variablen, Selektorvererbung usw. hinzufügt.

Sass kann auf drei Arten verwendet werden

Als Befehlszeilentool
Als eigenständiges Ruby-Modul
Als Plugin für jedes Rack-fähige Framework

Kostenloser PDF-Download: Fragen und Antworten zum SASS-Interview

2) Nennen Sie die wichtigsten Funktionen von Sass?

Zu den Hauptfunktionen von Sass gehören:

Vollständig CSS3-kompatibel
Spracherweiterungen wie Verschachtelung, Variablen und Mixins
Viele nützliche Funktionen zur Manipulation von Farben und anderen Werten
Erweiterte Funktionen wie Steueranweisungen für Bibliotheken
Gut formatierte, anpassbare Ausgabe

3) Die Datentypen auflisten, die SassScript unterstützt?

SassScript unterstützt sieben Hauptdatentypen

Zahlen (z. B. 1,5, 10 Pixel)
Textketten (z. B. „foo“, „bar“ usw.)
Farben (blau, #04a3f9)
Boolesche Werte (wahr oder falsch)
Nullen (z. B. null)
Liste der Werte, getrennt durch Leerzeichen oder Kommas (z. B. 1.5em, Arial, Helvetica usw.)
Ordnet einen Wert einem anderen zu (z. B. (Schlüssel 1: Wert1, Schlüssel 2: Wert 2))

4) Erklären Sie, wie man eine Variable in Sass definiert.

Variablen in Sass beginnen mit einem ($)-Zeichen und die Variablenzuweisung erfolgt mit einem Doppelpunkt (:).

5) Erklären Sie, was der Unterschied zwischen Sass und SCSS ist.

Der Unterschied zwischen Sass und SCSS besteht darin, dass

Sass ist ein CSS Präprozessor mit Syntaxverbesserungen und einer Erweiterung von CSS3
Sass hat zwei Syntax
Die erste Syntax ist „SCSS“ und verwendet die Erweiterung .scss
Die andere Syntax ist die eingerückte Syntax oder einfach „Sass“ und verwendet die Erweiterung .sass
Während Sass eine lockere Syntax mit Leerzeichen und keinen Semikolons hat, ähnelt SCSS eher CSS

Jedes CSS-gültige Dokument kann in Sass konvertiert werden, indem einfach die Erweiterung von.CSS in.SCSS geändert wird.

6) Wofür wird Selector Nesting in Sass verwendet?

In Sass bietet die Verschachtelung von Selektoren Stylesheet-Autoren die Möglichkeit, lange Selektoren zu berechnen, indem sie kürzere Selektoren ineinander verschachteln.

7) Erklären Sie, wofür eine @extend-Funktion in Sass verwendet wird?

In Sass bietet die @EXTEND-Direktive eine einfache Möglichkeit, einem Selektor zu ermöglichen, die Stile eines anderen zu erben. Ziel ist es, einem Selektor A die Möglichkeit zu geben, die Stile eines Selektors B zu erweitern. Dabei wird Selektor A zu Selektor B hinzugefügt, sodass beide dieselben Deklarationen verwenden. @EXTEND verhindert das Aufblähen von Code, indem Selektoren, die denselben Stil haben, in einer Regel gruppiert werden.

8) Erklären Sie, welchen Nutzen die @IMPORT-Funktion in Sass hat.

Die @IMPORT-Funktion in Sass

Erweitert die CSS-Importregel, indem der Import von SCSS- und Sass-Dateien ermöglicht wird
Alle importierten Dateien werden in einer einzigen ausgegebenen CSS-Datei zusammengeführt
Kann praktisch jede Datei kombinieren und alle Ihre Stile beibehalten
@IMPORT benötigt einen Dateinamen zum Importieren

9) Warum gilt Sass als besser als LESS?

Mit Saas können Sie wiederverwendbare Methoden schreiben und logische Anweisungen, z. B. Schleifen und Bedingungen, verwenden
Saas-Benutzer können auf die Compass-Bibliothek zugreifen und einige tolle Funktionen wie die dynamische Sprite-Map-Generierung, Legacy-Browser-Hacks und browserübergreifende Unterstützung für CSS3-Funktionen nutzen
Mit Compass können Sie auch ein externes Framework wie Blueprint, Foundation oder hinzufügen Bootstrap oben drauf
In LESS können Sie eine grundlegende Logikanweisung mithilfe eines „geschützten Mixins“ schreiben, was den Sass-IF-Anweisungen entspricht
In LESS können Sie numerische Werte mithilfe rekursiver Funktionen durchlaufen, während Sie in Sass jede Art von Daten iterieren können
In Sass können Sie Ihre eigenen praktischen Funktionen schreiben

10) Erklären Sie, wozu die Mixin-Funktion in Sass dient. Was bedeutet es, einen Mixin auszutrocknen?

Mit Mixin können Sie Stile definieren, die im gesamten Stylesheet wiederverwendet werden können, ohne auf nicht-semantische Klassen wie .float-left zurückgreifen zu müssen.

Das Austrocknen einer Mischung bedeutet die Aufteilung in dynamische und statische Teile. Das dynamische Mixin ist dasjenige, das der Benutzer tatsächlich aufruft, und das statische Mixin sind die Informationsteile, die andernfalls dupliziert würden.

11) Erklären Sie, was Sass Maps ist und welchen Nutzen Sass Maps haben.

Bei der Sass-Karte handelt es sich um hierarchisch strukturierte Daten und nicht nur um eine Ansammlung von Variablen. Es kann bei der Organisation des Codes hilfreich sein. Einige großartige Einsatzmöglichkeiten von Sass sind

Dies ist sehr nützlich, wenn Sie in Ihrem Projekt mit Elementebenen arbeiten
Dies kann beim Farbmanagement hilfreich sein, wenn eine lange Liste verschiedener Farben und Schattierungen vorhanden ist
Verwenden Sie die Symbolzuordnung für verschiedene Social-Media-Symbole, zum Beispiel: Facebook: „\e607“ oder Twitter: „\e602“.
Im Gegensatz zu anderen Programmierbibliotheken besteht die Sass-Karte nur aus Code, der verwendet werden soll

12) Erklären Sie, wie sich Sass-Kommentare von regulärem CSS unterscheiden.

Die Syntax für Kommentare in regulärem CSS beginnt mit /* comments…*/, während es in SASS zwei Arten von Kommentaren gibt, die einzeiligen Kommentare // und die mehrzeiligen CSS-Kommentare mit /* */.

13) Unterstützt Sass Inline-Kommentare?

Einzeilige Kommentare // werden vom .scss-Präprozessor entfernt und erscheinen nicht in Ihrer .css-Datei

Während die Kommentare */ gültiges CSS sind, bleiben sie bei der Übersetzung von .scss in Ihre .css-Datei erhalten

14) Wie wird Interpolation in Sass verwendet?

In Sass können Sie ein Element in einer Variablen definieren und es innerhalb des Sass-Codes interpolieren. Dies ist nützlich, wenn Sie Ihre Module in separaten Dateien aufbewahren.

15) Erklären Sie, wann Sie die %placeholders in Sass verwenden können?

%placeholders in Sass ist nützlich, wenn Sie Stile schreiben möchten, die erweitert werden sollten, Sie aber nicht möchten, dass die Basisstile in den Ausgabe-CSS-Stilen angezeigt werden

16) Ist es in Sass möglich, Variablen innerhalb von Variablen zu verschachteln?

Die Interpolation von Variablennamen ist derzeit in Sass nicht möglich. Sie können jedoch die Interpolation von Platzhaltern verwenden.

17) Was sind die Vor- und Nachteile von Sass?

Vorteile:

Sass ist leicht zu erlernen, insbesondere für diejenigen, die über Python-, Ruby- oder Coffescript-Hintergrund verfügen und sich mit der Verwendung von Funktionen und dem Schreiben von Mixins auskennen
CSS kann problemlos in Sass konvertiert werden
Während des gesamten Projekts müssen Sie ähnliche CSS-Anweisungen nicht mit dem @extend-Attribut wiederholen
Es ermöglicht die Definition von Variablen, die im gesamten Projekt verwendet werden können
Dadurch bleibt Ihr reaktionsfähiges Projekt besser organisiert

Nachteile:

Erfordert Zeit, um vor der Verwendung neue Funktionen des Präprozessors zu erlernen
Möglicherweise können Sie die integrierte Elementinspektionsfunktion des Browsers nicht verwenden
Die Fehlerbehebung kann schwierig sein

18) Erklären Sie, was WENIGER ist?

LESS ist eine dynamische Stylesheet-Erzeugungssprache. LESS ist ein CSS-Präprozessor und erweitert CSS um dynamisches Verhalten. Es ermöglicht Variablen, Mixins, Operationen und Funktionen. LESS läuft sowohl auf der Serverseite als auch auf der Clientseite.

19) Erklären Sie, wie eine LESS-Datei erstellt wird und wo sie gespeichert und kompiliert wird.

Das Erstellen oder Speichern einer LESS-Datei ähnelt dem Erstellen/Speichern einer CSS-Datei. Eine neue LESS-Datei kann mit der Erweiterung .less erstellt werden, oder Sie können eine vorhandene .css-Datei in eine .less-Datei umbenennen. Sie können WENIGER Code mit vorhandenem CSS-Code schreiben.

Am besten erstellen Sie es im Ordner ~/content/ oder ~/Styles/

20) Auf welche Weise kann LESS genutzt werden?

Über npm kann LESS auf der Kommandozeile verwendet werden
Als Skriptdatei für den Browser herunterladen
Für Tools von Drittanbietern wird es verwendet

21) Wie wird die Variable in LESS dargestellt?

LESS ermöglicht die Definition von Variablen. In LESS wird die Variable als @sing dargestellt. Die Variablenzuweisung erfolgt hingegen mit einem: (Doppelpunkt) sing. Die Werte der Variablen werden sowohl in die CSS-Ausgabedatei als auch in die minimierte Datei eingefügt.

22) Erklären Sie, wie nützlich Mixins ist.

Mixins ermöglichen das Einbetten aller Eigenschaften einer Klasse in eine andere Klasse, indem sie den Klassennamen als eine ihrer Eigenschaften einschließen. Es ist genau wie Variablen, aber für ganze Klassen.

23) Erklären Sie, wie Sie Code in einem Überwachungsmodus festlegen können, wenn Sie LESS.js in einem ausführen HTML5 Browser?

Wenn Sie LESS.js in einem HTML5-Browser ausführen, wird der lokale Speicher zum Zwischenspeichern des generierten CSS verwendet. Aus Entwicklersicht können sie die vorgenommenen Änderungen jedoch nicht sofort sehen. Um Ihre Änderungen sofort zu sehen, können Sie das Programm im Entwicklungs- und Beobachtungsmodus laden, indem Sie JavaScript folgen

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Erklären Sie, was die Verschachtelung in der LESS-Programmierung bedeutet.

Durch die Verschachtelung in LESS werden Anweisungen in anderen Anweisungen geclustert, sodass eine Gruppe zusammengehöriger Codes entsteht. Mit anderen Worten: Wenn wir einen Codeausschnitt hinzufügen und darin einen weiteren Code hinzufügen, wird dieser Codeausschnitt als Verschachtelung bezeichnet.

25) Erwähnen Sie, welche Farbkanalfunktionen in LESS verwendet werden?

Farbton
Sättigung
hsvhue
Sättigung
hswalue
rot markiert
grünen
blauen
Alpha
Luma
Leuchtdichte

26) Erklären Sie, was data-uri in LESS ist.

In CSS sind Daten-URIs eine der besten Techniken. Sie ermöglichen es Entwicklern, externe Bildreferenzen zu vermeiden und sie stattdessen direkt in ein Stylesheet einzubetten. Daten-URIs sind die hervorragende Möglichkeit, HTTP-Anfragen zu reduzieren

27) Erklären Sie, was „Source Map Less Inline“ bedeutet?

Die Option „Source Map Less Inline“ gibt an, dass wir alle CSS-Dateien in die Sourcemap einbinden sollen. Das bedeutet, dass Sie Ihre Kartendatei nur benötigen, um zu Ihrer Originalquelle zu gelangen.

28) Erklären Sie, welchen Nutzen Extend „all“ in LESS hat?

Wenn Sie das Schlüsselwort „all last“ in einem Erweiterungsargument angeben, weist es LESS an, diesen Selektor als Teil eines anderen Selektors abzugleichen.

29) Erklären Sie, was „StrictImports“ in LESS bedeutet.

Der strictImports steuert, ob der Compiler einen @import innerhalb von @media-Blöcken oder anderen Selektorblöcken zulässt

30) Nennen Sie die Unterschiede zwischen LESS und Sass?

Jede Stylesheet-Sprache ist in ihrer Perspektive und Verwendung gut; Es gibt jedoch nur wenige Unterschiede in ihrer Verwendung.

WENIGER	Sass
– LESS verwendet JavaScript und wird clientseitig verarbeitet	– Sass ist in Ruby codiert und wird somit serverseitig verarbeitet
– Variablennamen werden mit dem @-Symbol vorangestellt	– Den Variablennamen wird das $-Symbol vorangestellt
– LESS erbt nicht mehrere Selektoren mit einem Satz von Eigenschaften	– Sass erbt mehrere Selektoren mit einem Satz von Eigenschaften
– LESS funktioniert nicht mit „unbekannten“ Einheiten und gibt auch keine Syntaxfehlerbenachrichtigung für inkompatible Einheiten oder mathematisch bedingte Syntaxfehler zurück	– Sass ermöglicht Ihnen die Arbeit mit „unbekannten“ Einheiten und gibt außerdem eine Syntaxfehlerbenachrichtigung für inkompatible Einheiten zurück

31) Was sind die Gemeinsamkeiten zwischen LESS und Sass?

Zwischen LESS und Sass gibt es Ähnlichkeiten

Namensräume
Farbfunktionen
Mixins und parametrische Mixins
Verschachtelungsfunktionen
JavaScript-Auswertungen

32) Erklären Sie, wozu &combinator dient.

&combinator verkettet den verschachtelten Selektor mit dem übergeordneten Selektor. Es ist nützlich für Pseudoklassen wie :hover und :focus

33) Erklären Sie, wozu Operationen in LESS dienen.

Operationen können zum Ausführen von Funktionen wie verwendet werden

Einfache mathematische Operatoren: +, –, *, /
Farbfunktionen
Mathematische Funktionen
Jede Größen- oder Farbvariable kann bearbeitet werden

34) Erklären Sie, welchen Nutzen Escapen hat.

Die Verwendung von Escape in LESS

Wenn Sie CSS ausgeben müssen, das keine gültige CSS-Syntax ist
Proprietäre Syntax wird von LESS nicht erkannt
Der LESS-Compiler gibt einen Fehler aus, wenn er nicht verwendet wird
Einfaches Präfix mit ~-Symbol und Anführungszeichen

35) Was enthält LESS-Elemente?

Weniger Elemente enthalten häufig verwendete Mixins wie

.Gradient
.gerundet
.Opazität
.Box Schatten
.inneren Schatten

36) Alternativen gegen WENIGER auflisten?

SASS: Syntaktisch fantastische Stylesheets
SCSS: Version.2 von SASS
Griffel

37) Erklären Sie, wie Sie den Compiler über die Befehlszeile aufrufen können.

Sie können den Compiler über die Befehlszeile in LESS aufrufen

$ wenigerc Stile.weniger

Dadurch wird das kompilierte CSS ausgegeben Standardausgabe; Sie können es dann in eine Datei Ihrer Wahl umleiten

$ Lessc Styles.less > Styles.css

38) Wozu dient die Funktion e()?

Mithilfe der Funktion e() können Sie einen Wert maskieren, sodass er direkt an das kompilierte CSS weitergeleitet wird, ohne dass der LESS-Compiler dies bemerkt.

39) Erklären Sie, wie Sie LESS in CSS vorkompilieren können.

Zum Vorkompilieren von LESS in CSS können Sie verwenden

Führen Sie less.js mit Node.js aus: Mithilfe des Node.js-JavaScript-Frameworks können Sie das less.js-Skript außerhalb des Browsers ausführen
Verwenden Sie lessphp: Für die Implementierung des in PHP geschriebenen LESS-Compilers wird lessphp verwendet
Online-Compiler verwenden: Verwenden Sie den Online-Compiler für die schnelle Kompilierung von WENIGER Code, ohne einen Compiler installieren zu müssen
Weniger. app (für Mac-Benutzer): Less.app ist ein kostenloses Tool für Mac-Benutzer. Dieses Tool kompiliert sie automatisch in CSS-Dateien

40) Erklären Sie, wie die Zusammenführungsfunktion in LESS verwendet wird.

Zum Aggregieren von Werten aus mehreren Eigenschaften in einer durch Leerzeichen oder Kommas getrennten Liste unter einer einzelnen Eigenschaft wird LESS verwendet. Dies ist nützlich für Eigenschaften wie Transformation und Hintergrund

41) Wie kann man in LESS Schleifenstrukturen erstellen?

Ein Mixin kann sich selbst in LESS aufrufen. Solche rekursiven Mixins können in Kombination mit Mustervergleich und Schutzausdrücken verwendet werden, um verschiedene iterative/Schleifenstrukturen zu erstellen.

42) Warum brauchen wir parametrische Mixins in LESS?

Parametrische Mixins sind die gleichen wie Standard-Mixins. Der einzige Unterschied besteht darin, dass parametrische Mixins Parameter wie Funktionen in JavaScript annehmen. Nachdem Sie die Parameter für die Mixins festgelegt haben, erhalten Sie mehr Kontrolle über die Mixins.