scss-Konzepte und -Nutzung

SCSS (Sassy CSS) ist eine Präprozessorsprache für CSS. Sie bietet mehr Funktionen und Flexibilität auf Basis von CSS und macht das Schreiben und Verwalten von Stylesheets effizienter und komfortabler.

Hier sind einige Vorteile von SCSS:

Variablen: SCSS ermöglicht die Verwendung von Variablen zum Speichern von Werten wie Farben, Schriftgrößen usw., wodurch es bequemer und wartbarer wird, diese Werte im gesamten Stylesheet einheitlich anzupassen.
Verschachtelte Regeln: Verschachtelte Regeln können in SCSS verwendet werden, um Stile zu organisieren und die Codestruktur klarer zu gestalten. Sie können beispielsweise den Pseudoklassenstil eines Elements in den Stilblock seines übergeordneten Elements schreiben, anstatt ihn an mehreren Stellen zu schreiben.
Mixins: Mixins sind eine Möglichkeit, eine Reihe von Stileigenschaften in einem wiederverwendbaren Block zu kombinieren. Dadurch wird vermieden, dass immer wieder Code im gleichen Stil geschrieben wird, und die Wiederverwendbarkeit und Lesbarkeit des Codes wird verbessert.
Importieren (Inline-Importe): Mehrere SCSS-Dateien können über die @import-Regel zu einer Datei zusammengeführt werden. Dieser Ansatz hilft dabei, das Stylesheet in logische Einheiten aufzuteilen und kann je nach Bedarf flexibel organisiert und verwaltet werden.
Vererbung (Extend): SCSS unterstützt die Stilvererbung über das Schlüsselwort @extend, wodurch das Stylesheet modularer und wartbarer werden kann.
Operationen: SCSS ermöglicht mathematische Operationen in Stylesheets wie Addition, Subtraktion, Multiplikation und Division, was für die Handhabung einiger dynamischer Berechnungen hilfreich ist.
Modularität: Die Eigenschaften von SCSS machen Stylesheets modularer und strukturierter, wodurch Stile besser verwaltet und gepflegt werden können, insbesondere in großen Projekten.

Zusammenfassend lässt sich sagen, dass SCSS nicht nur alle Funktionen von CSS beibehält, sondern auch erweiterte Funktionen wie Variablen, Verschachtelung, Mischen, Importieren usw. einführt. Diese Funktionen ermöglichen es Entwicklern, Stylesheets effizienter zu schreiben und zu verwalten und werden häufig in modernen Front-Office-Anwendungen verwendet. Ende der Entwicklung.

Vergleich zwischen SCSS und CSS

Grammatik:

CSS: Grundlegende Cascading-Stylesheet-Syntax. Regeln werden durch Selektoren, Attribute und Werte definiert.
SCSS: SCSS ist eine Präprozessorsprache für CSS. Sie bietet mehr Funktionen und Syntax, wie Variablen, verschachtelte Regeln, Mixins, Importe usw., die das Schreiben von Stylesheets flexibler und effizienter machen.

Lesbarkeit und Wartbarkeit:

CSS: In größeren Projekten können CSS-Dateien sehr ausführlich und schwer zu warten sein, da ihnen strukturierte und modulare Funktionen fehlen.
SCSS: SCSS unterstützt Variablen und verschachtelte Regeln, um den Code besser lesbar und wartbar zu machen. Durch die Verwendung von Variablen und Mixins kann das wiederholte Schreiben von Code reduziert werden und verschachtelte Regeln können die hierarchische Beziehung der HTML-Struktur klarer ausdrücken.

Funktionserweiterung:

CSS: Standard-CSS kann nur grundlegende Stildefinitionen und Selektorabgleiche durchführen.
SCSS: SCSS führt erweiterte Funktionen wie Mischen, Vererbung und Berechnungen ein. Diese Funktionen machen Stylesheets flexibler und leistungsfähiger und können komplexe Stilanforderungen besser bewältigen.

Kompatibilität:

CSS: Browser unterstützen CSS direkt, es sind keine zusätzlichen Kompilierungsschritte erforderlich.
SCSS: SCSS muss von einem Compiler in eine normale CSS-Datei konvertiert werden, bevor es vom Browser verstanden und angewendet werden kann.

Lernkurve:

CSS: Das Erlernen von CSS ist relativ einfach. Sie müssen lediglich die grundlegende Kombination von Selektoren, Eigenschaften und Werten verstehen.
SCSS: Das Erlernen von SCSS erfordert die Beherrschung seiner einzigartigen Syntax und Funktionen wie Variablen, Mischen, Verschachteln usw., was einen bestimmten Lern- und Anpassungsprozess erfordert.

Zusammenfassend lässt sich sagen, dass SCSS im Vergleich zu gewöhnlichem CSS mehr Tools und Funktionen bietet, um das Schreiben und Verwalten von Stylesheets zu vereinfachen, und sich besonders für die Entwicklung großer und komplexer Projekte eignet. Für kleine Projekte oder einfache Styling-Anforderungen kann jedoch einfaches CSS einfacher und bequemer sein.

Verwendung von SCSS

Bevor Sie scss lernen, installieren Sie zunächst zwei Plug-Ins in vscode, um scss für das spätere Lernen in normale CSS-Dateien zu konvertieren!

Suchen Sie im Plug-In-Store nach Sass, laden Sie die folgenden beiden Plug-Ins herunter und starten Sie vscode neu!

Variablen deklarieren

Das Deklarieren von Variablen in SCSS ist sehr einfach. Sie können das $-Symbol zum Definieren von Variablen verwenden.

Hier ist ein einfaches Beispiel, das zeigt, wie Variablen in SCSS deklariert und verwendet werden:


// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

Im obigen Beispiel haben wir zwei Variablen $primary-color und $secondary-color definiert, um die Primärfarbe bzw. die Sekundärfarbe zu speichern. Wir können diese Variablen dann in Stilregeln verwenden, um die Farben im gesamten Stylesheet konsistent und leicht zu ändern zu halten.

Wenn eine SCSS-Datei in eine normale CSS-Datei kompiliert wird, werden alle Variablen durch ihre entsprechenden Werte ersetzt, sodass die endgültig generierte CSS-Datei keine Variablendeklarationen enthält.

Standardvariablen unterscheiden

In SCSS können Sie Standardvariablen verwenden, um sicherzustellen, dass eine Variable einen alternativen Wert hat, wenn sie nicht definiert ist. Dies ist besonders nützlich, wenn Sie mit Themen arbeiten oder Stile konfigurieren.

Hier ist ein Beispiel für die Deklaration und Verwendung von Standardvariablen:


// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

Im obigen Beispiel haben wir das Tag !default verwendet, um den Standardwert zu definieren. Das heißt, wenn $primary-color oder $secondary-color vor der Einführung in diese SCSS-Datei nicht an anderer Stelle definiert werden, verwenden sie die angegebenen Standardwerte (#3498db und #2ecc71). Wenn diese Variablen vor dem Importieren der Datei definiert wurden, werden die Standardwerte ignoriert.

Der Vorteil der Verwendung von Standardvariablen besteht darin, dass Sie alternative Werte für Variablen bereitstellen können, ohne bereits definierte Variablen zu überschreiben. Dies ist besonders nützlich, um Themen zu erstellen oder Variablen über mehrere Stildateien hinweg zu teilen.

Unterscheiden Sie zwischen globalen Variablen und lokalen Variablen

Globale Variablen: Globale Variablen sind Variablen, die außerhalb eines Selektors oder außerhalb eines Mixers/einer Funktion deklariert werden. Sie sind im gesamten Stylesheet zugänglich und wenn dieselbe globale Variable in mehreren Dateien definiert ist, bleiben ihre Werte konsistent.
Lokale Variablen: Lokale Variablen sind Variablen, die innerhalb eines Selektors oder innerhalb eines Mixers/einer Funktion definiert sind. Sie können nur innerhalb des Geltungsbereichs verwendet werden, in dem sie definiert sind, und sind außerhalb dieses Geltungsbereichs nicht mehr gültig.

Hinweis: Lokale Variablen überschreiben globale Variablen

Wenn eine Variable mit demselben Namen wie eine globale Variable in einem lokalen Bereich erneut deklariert wird, überschreibt die lokale Variable den Wert der globalen Variablen. Dadurch können unterschiedliche Variablenwerte für einen bestimmten Selektor oder Mixer definiert werden, ohne dass sich dies auf die globale Situation auswirkt.

Verwenden Sie das Schlüsselwort !global, um lokale Variablen in globale Variablen umzuwandeln

SCSS stellt das Schlüsselwort !global bereit, um lokale Variablen explizit als globale Variablen zu deklarieren. Dadurch wird der Wert einer lokalen Variablen in den globalen Bereich hochgestuft, in dem er deklariert wird, und alle vorhandenen globalen Variablen mit demselben Namen überschreiben.

Beispiel:


// 全局变量
$primary-color: #3498db;
 
.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}
 
// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;
 
.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}
 
body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

Im ersten Beispiel überschreibt die lokale Variable $primary-color im .button-Selektor den Wert der globalen Variablen. Im zweiten Beispiel werden mithilfe des Schlüsselworts !global die lokalen Variablen im .button-Selektor in globale Variablen umgewandelt und wirken sich so auf die Variablenwerte im globalen Bereich aus.

Verschachtelte Syntax

Selektorverschachtelung

grundlegende Verschachtelung

Durch die Verschachtelung von Selektoren können Stilregeln für untergeordnete Selektoren in übergeordneten Selektoren verschachtelt werden, zum Beispiel:


// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
 
    li {
      display: inline-block;
      margin-right: 10px;
 
      a {
        text-decoration: none;
        color: #fff;
 
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

Im obigen Code enthält der .navbar-Selektor einen verschachtelten ul, li und einen Unterselektor. Diese verschachtelte Struktur macht Stilregeln klarer und einfacher zu verwalten.

Referenz zum verschachtelten übergeordneten Selektor (&)

In SCSS wird das &-Symbol verwendet, um auf einen übergeordneten Selektor zu verweisen, was besonders nützlich im Fall von Pseudoklassen oder Pseudoelementen ist. Verwenden Sie beispielsweise &:hover, um auf den übergeordneten Selektor des aktuellen Selektors zu verweisen und einen :hover-Statusstil hinzuzufügen.


.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  &:hover {
    background-color: #2980b9;
  }
}

Überlegungen zur Verschachtelung

Selektortiefe: Vermeiden Sie eine zu tiefe Selektorverschachtelung, da diese die Stilpriorität erhöhen und Stilüberschreibungen und -pflege erschweren kann.
Lesbarkeit: Achten Sie bei der Verwendung der Selektorverschachtelung darauf, dass der Code lesbar und klar bleibt, und vermeiden Sie zu komplexe verschachtelte Strukturen.
Leistung: Verschachtelte Strukturen können die Größe der generierten CSS-Datei erhöhen, können aber normalerweise durch die richtige Organisation und Schreibweise im Stil optimiert werden.

verschachtelt verschachtelt

SCSS ermöglicht mehrere Ebenen der Selektorverschachtelung, zum Beispiel:


.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

Verschachtelung von Eigenschaften

In SCSS gibt es neben der Selektorverschachtelung auch die Funktion der Attributverschachtelung, eine weitere Funktion, die Stylesheets übersichtlicher und einfacher zu verwalten macht. Durch die Verschachtelung von Eigenschaften können zusammengehörige Eigenschaften ähnlich der Form eines Objekts organisiert werden.

Grundlegende Attributverschachtelung

Durch die Verschachtelung von Eigenschaften können verwandte Eigenschaften innerhalb eines Codeblocks platziert werden, zum Beispiel:


.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

Im obigen Beispiel enthalten die Schriftart-, Rand- und Füllblöcke verwandte Attribute. Diese Organisation macht die Eigenschaften innerhalb jedes Blocks klarer und einfacher zu ändern und zu verwalten.

Überlegungen zur Verschachtelung

Unterstützte Eigenschaften: Nicht alle CSS-Eigenschaften unterstützen die Verschachtelung, in der Regel solche, die Schlüssel-Wert-Paare akzeptieren können, z. B. Schriftart, Rand, Abstand, Rahmen usw.
Lesbarkeit: Stellen Sie bei der Verwendung von Attributverschachtelungen die Lesbarkeit und Klarheit des Codes sicher und vermeiden Sie übermäßige Verschachtelungen und komplexe Strukturen.
Verschachtelte Verschachtelung: Sie können auch andere Eigenschaften innerhalb von Eigenschaftenverschachtelungen verschachteln, wodurch Ihre Stile weiter organisiert und strukturiert werden können.

erben

In SCSS ist die Vererbung (Extend) eine sehr nützliche Funktion, die es einem Selektor ermöglicht, die Stilregeln eines anderen Selektors zu erben. Diese Funktion reduziert doppelten CSS-Code und macht Stylesheets modularer und einfacher zu warten.

Grundlegende Verwendung

Die Selektorvererbung kann mit dem Schlüsselwort @extend erreicht werden. Zum Beispiel:


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}
 
.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

Im obigen Beispiel ist %message-shared ein Platzhalterselektor, der einen gemeinsamen Satz von Stilen definiert. .success-message und .error-message erben jeweils den Stil von %message-shared und fügen ihre eigenen Hintergrundfarben hinzu.

Hinweise zur Vererbung

Selektorreihenfolge: Durch Vererbung kann eine lange Liste von Selektoren generiert werden, die sich auf die Stilpriorität auswirken kann. Stellen Sie sicher, dass die Reihenfolge und Position der Selektoren korrekt ist, wenn Sie @extend verwenden, um unnötige Prioritätsprobleme zu vermeiden.
Einschränkung: Geerbte Selektoren müssen nach dem geerbten Selektor erscheinen. Das heißt, wenn Sie in Ihrer SCSS-Datei einen Selektor definieren und @extend verwenden, um seinen Stil im nachfolgenden Code zu erben, wird diese Vererbung erst wirksam, nachdem sie definiert wurde.
Platzhalterselektoren vs. Klassenselektoren: Platzhalterselektoren, die mit % beginnen, sind im Allgemeinen bessere Ziele für die Vererbung als direkte Klassenselektoren, da sie nach der Kompilierung keine redundanten Selektoren generieren. Klassenselektoren hingegen erzeugen überall dort, wo sie verwendet werden, doppelte Stile, was die Dateigröße und -komplexität erhöht.

Anwendungsszenarien

Die Vererbung eignet sich besonders für Selektoren mit gemeinsamen Merkmalen, wie z. B. Schaltflächenkomponenten, Meldungsfelder usw. Durch Vererbung können Sie dieselben Stilregeln in verschiedenen Szenarien wiederverwenden und gleichzeitig Ihren Code sauber und wartbar halten.

Zusammenfassend lässt sich sagen, dass die Vererbung in SCSS ein leistungsstarkes Tool ist, das Ihnen helfen kann, Stilduplizierungen zu vermeiden und die Modularität und Klarheit Ihres Codes beizubehalten. Bei der Verwendung müssen Sie jedoch auf die Reihenfolge und Position der Selektoren sowie auf die Angemessenheit achten Verwendung von Platzhaltern, um die Wirkung zu maximieren.

Platzhalter%

Der Platzhalter % ist ein spezieller Selektor in SCSS, der häufig zum Definieren von Stilregeln verwendet wird, die vererbt werden können, aber keine tatsächliche CSS-Ausgabe generieren. Speziell:

Platzhalter definieren


%placeholder-selector {
  // 样式规则
}

Im obigen Beispiel ist %placeholder-selector ein Platzhalterselektor, der mit % beginnt. Es definiert eine Reihe von Stilregeln, der entsprechende Selektorname wird jedoch nicht im kompilierten CSS angezeigt.

Vererbungsplatzhalter


.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

Durch die Verwendung des Schlüsselworts @extend kann .some-class den Stil von %placeholder-selector erben. Dies bedeutet, dass .some-class alle in %placeholder-selector definierten Stilregeln anwendet und eine entsprechende CSS-Ausgabe generiert.

Vorteile und anwendbare Szenarien

Reduzieren Sie Duplikate: Platzhalterselektoren ermöglichen es, einen gemeinsamen Satz von Stilregeln zu definieren und diese bei Bedarf durch Vererbung wiederzuverwenden, wodurch Codeduplizierungen vermieden werden.
Modularität: Platzhalterselektoren tragen zur Modularität und Wartbarkeit des Codes bei, insbesondere in großen Projekten, und können die strukturelle Klarheit von Stylesheets verbessern.
Redundanz vermeiden: Im Vergleich zur Verwendung von Klassenselektoren generieren Platzhalterselektoren keine redundanten Selektoren und reduzieren so die Größe von CSS-Dateien.

Vorsichtsmaßnahmen

Reihenfolge und Position: Wenn @extend zum Erben von Platzhalterselektoren verwendet wird, muss der geerbte Platzhalterselektor definiert werden, bevor sein Selektor verwendet wird, da sonst unerwartete Probleme mit der Stilhierarchie auftreten können.
Mischen: Sie können Platzhalterselektoren mit gewöhnlichen Klassenselektoren kombinieren, müssen jedoch sorgfältig damit umgehen, um unerwartete CSS-Ausgaben zu vermeiden.

Zusammenfassend ist der Platzhalterselektor % ein leistungsstarkes Tool in SCSS, das Entwicklern dabei helfen kann, die Wiederverwendbarkeit und Wartbarkeit von Stylesheets zu verbessern und gleichzeitig unnötige CSS-Redundanz zu reduzieren.

Mischen Sie @mixin

Mixins sind eine weitere sehr leistungsstarke Funktion in SCSS, die es ermöglicht, eine Reihe von Stilregeln in einem wiederverwendbaren Codeblock zu kapseln und dann bei Bedarf darauf zu verweisen. Im Gegensatz zum Platzhalterselektor % können Mixins direkt CSS-Ausgaben generieren und eignen sich daher für Situationen, in denen derselbe Stil an mehreren Stellen verwendet werden muss.

Mischung definieren


@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

Im obigen Beispiel definiert das Schlüsselwort @mixin ein Mixin namens mixin-name, das mehrere Argumente akzeptieren kann (falls erforderlich) und darin eine Reihe von Stilregeln definiert.

Anrufmischung


.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

Verwenden Sie das Schlüsselwort @include, um das Mixin im Selektor aufzurufen und ihm Parameter zu übergeben. Auf diese Weise wendet .some-class die im Mixin definierten Stilregeln an und wendet die übergebenen Parameterwerte auf die entsprechenden Parametervariablen an.

Beispiel


@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}
 
.button-secondary {
  @include button-style(#2ecc71, #fff);
}

Vorteile und anwendbare Szenarien

Flexibilität: Durch das Mischen können Parameter übergeben und je nach Bedarf unterschiedliche Stilausgaben dynamisch generiert werden, wodurch der Stil flexibler und anpassbarer wird.
Lesbarkeit: Das Kapseln häufig verwendeter Stilregeln in einem Mixin kann die Lesbarkeit und Wartbarkeit Ihres Codes verbessern, insbesondere wenn derselbe Stil an mehreren Stellen erforderlich ist.
Wiederverwendbarkeit: Derselbe Mix kann mehrmals in verschiedenen Selektoren und Dateien aufgerufen werden, um eine wiederholte Definition von Stilen zu vermeiden und die Codemenge zu reduzieren.

Vorsichtsmaßnahmen

Namenskonflikte: Stellen Sie sicher, dass Mixins nicht mit vorhandenen CSS-Klassennamen oder anderen Mixins in Konflikt geraten, um unerwartete Stilüberschreibungen oder Fehler zu vermeiden.
Parameterübergabe: Stellen Sie beim Aufrufen eines Mixins sicher, dass die übergebenen Parametertypen und die übergebene Reihenfolge mit den Anforderungen der Mixin-Definition übereinstimmen, um Kompilierungsfehler oder unerwartetes Verhalten zu vermeiden.
Auswirkungen auf die Leistung: Die umfangreiche Verwendung von Mixins kann die Größe der resultierenden CSS-Dateien erhöhen. Seien Sie daher vorsichtig mit den Auswirkungen auf die Leistung.

Zusammenfassend ist mix @mixin ein leistungsstarkes Tool zum Kapseln und Wiederverwenden von Stilregeln in SCSS. Es kann die Wartbarkeit und Flexibilität von CSS erheblich verbessern und eignet sich für verschiedene komplexe und wiederholte Stilanforderungen.

SCSS verwendet bedingte Anweisungen

In SCSS ermöglichen bedingte Anweisungen die dynamische Generierung von CSS-Stilen basierend auf bestimmten Bedingungen. Bedingte Anweisungen in SCSS ähneln bedingten Anweisungen in anderen Programmiersprachen, einschließlich @if, @else if und @else.

@if-Anweisung

Mit der @if-Anweisung können Stile basierend auf einer Bedingung generiert werden. Die Syntax lautet wie folgt:


$use-rounded-corners: true;
 
.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

Wenn im obigen Beispiel der Wert der Variablen $use-rounded-corners true ist, wird der Stil der .button-Klasse generiert, einschließlich border-radius: 4px;. Wenn die Bedingung falsch ist, wird dieser Teil des Stils nicht generiert.

@else- und @else if-Anweisungen

Zusätzlich zu @if können Sie auch @else if und @else verwenden, um weitere bedingte Zweige hinzuzufügen.


$button-size: medium;
 
.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

In diesem Beispiel werden abhängig vom Wert der Variablen $button-size unterschiedliche Füllwerte ausgewählt, die auf die Klasse .button angewendet werden. Wenn es keine passende Bedingung gibt, wird der Codeblock in @else ausgeführt.

Verschachtelung bedingter Anweisungen

Bedingte Anweisungen können auch verschachtelt werden, um komplexere Logik zu verarbeiten.


$button-style: flat;
$button-size: medium;
 
.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
 
    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

In diesem Beispiel werden basierend auf den Werten von $button-style und $button-size verschiedene Stile zur Anwendung ausgewählt. Dieser verschachtelte Ansatz ermöglicht die Generierung komplexer Stilregeln basierend auf mehreren Bedingungen.

abschließend

Durch die Verwendung von bedingten Anweisungen können Sie eine flexiblere und dynamischere Stildefinition in SCSS erreichen und unterschiedliche CSS-Regeln basierend auf unterschiedlichen Bedingungen generieren, wodurch die Wartbarkeit und Skalierbarkeit des Stylesheets verbessert wird.

Drei Arten von Schleifen in SCSS

In SCSS gibt es drei Hauptschleifenkonstrukte, die zum Generieren wiederholter CSS-Regeln verwendet werden können: @for, @each und @while.

@for-Schleife

Die @for-Schleife wird verwendet, um Stile gemäß bestimmten Schritten und Bedingungen wiederholt zu generieren.

Grundgrammatik：


@for $i from <start> through <end> {
  // 循环体
}

aus<start> durch<end> : Geben Sie den Startwert und den Endwert der Schleife an (einschließlich des Endwerts).
Die Variable $i kann im Schleifenkörper verwendet werden, um den Indexwert der aktuellen Schleife darzustellen.

Beispiel：


@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

Im obigen Beispiel werden drei Klassen .item-1, .item-2 und .item-3 generiert, wobei die Breiten auf 100 Pixel, 200 Pixel bzw. 300 Pixel eingestellt sind.

@jede Schleife

Die @each-Schleife wird verwendet, um Listen- oder Kartentypdaten zu durchlaufen und Stile für jedes Element zu generieren.

Grundgrammatik：


@each $var in <list or map> {
  // 循环体
}

$var: repräsentiert die Variable der aktuellen Schleife.
<list or map>: Kann eine Liste (z. B. $list: item1, item2, item3;) oder eine Karte (Schlüssel-Wert-Paar) sein.

Beispiel：


$colors: (red, green, blue);
 
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

In diesem Beispiel werden drei Klassen .text-red, .text-green und .text-blue generiert und ihre Textfarben auf entsprechende Farbwerte gesetzt.

@while-Schleife

Die @while-Schleife generiert wiederholt Stile basierend auf einer Bedingung, bis die Bedingung nicht erfüllt ist.

Grundgrammatik：


$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

$i: als Schleifenzähler oder Bedingungsvariable.
Im Schleifenkörper kann jeder SCSS-Code ausgeführt werden. Normalerweise muss die Bedingungsvariable am Ende des Schleifenkörpers aktualisiert werden, um Endlosschleifen zu vermeiden.

Beispiel：


$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

Dieser Code generiert drei Klassen .item-1, .item-2 und .item-3 und legt ihre Breiten auf 100px, 200px bzw. 300px fest.

Zusammenfassen

Die drei SCSS-Schleifenstrukturen @for, @each und @while werden verwendet, um eine Schleife nach Index durchzuführen, Listen- oder Kartentypdaten zu durchlaufen und Stile basierend auf bedingten Schleifen zu generieren. Diese Schleifenstrukturen machen SCSS leistungsfähiger und flexibler und können je nach Bedarf komplexe CSS-Regeln generieren.

Benutzerdefinierte Funktionen und Verwendung

In SCSS können Stylesheets mit benutzerdefinierten Funktionen erweitert werden, die Parameter akzeptieren und verarbeitete Werte zurückgeben.

Definieren Sie benutzerdefinierte Funktionen

Verwenden Sie in SCSS das Schlüsselwort @function, um Funktionen zu definieren, die Parameter und Rückgabewerte haben können. Beispielsweise definieren wir eine Funktion, um die Gesamtbreite des Boxmodells eines Elements zu berechnen:


@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

Im obigen Beispiel:

total-width ist der Name der Funktion.
Die Funktion akzeptiert vier Parameter: $padding, $border, $margin, $content-width.
Die @return-Anweisung wird verwendet, um einen berechneten Wert zurückzugeben.

Verwenden Sie benutzerdefinierte Funktionen

Sobald eine Funktion definiert ist, kann sie in Stilen verwendet werden, um die erforderlichen Werte zu berechnen und zu generieren. Zum Beispiel:


.element {
  width: total-width(10px, 1px, 5px, 100px);
}

In diesem Beispiel wird die Funktion „total-width“ mit den Parametern 10px, 1px, 5px und 100px aufgerufen. Das von der Funktion zurückgegebene Ergebnis (116px) wird auf die width-Eigenschaft von .element angewendet.

Vorsichtsmaßnahmen

Funktionen können in jede SCSS-Datei eingebunden und wie andere Stilregeln organisiert und importiert werden.
Alle Funktionen von SCSS, wie z. B. Steueranweisungen (z. B. @if, @for, @each, @while) und integrierte Funktionen, können in Funktionen verwendet werden.
Die Parameter der Funktion können ein beliebiger SCSS-Datentyp sein, einschließlich Zahlen, Zeichenfolgen, Farben usw.

Hausaufgaben

Verwenden Sie SCSS, um das Schwarz-Weiß-Thema der Seite zu wechseln

html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>
 
  <script src="main.js"></script>
</body>
</html>

scss


// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);
 
// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);
 
// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
 
  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}
 
// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}
 
// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}
 
// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}
 
// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
 
// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}
 
// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
 
  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}


/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Technologieaustausch