Zun?chst ist die SASS -Zusammenstellung unglaublich schnell, insbesondere wenn sie mit Browsersync für sofortige Browser -Updates verwendet wird. Mit zunehmendem SASS -Projekt zunimmt jedoch die Kompilierungszeit unweigerlich und wirkt sich auf den Workflow aus. In diesem Artikel wird eine L?sung vorgestellt, die im WordPress CSS -Editor Microthemer demonstriert wird, um diesen Leistungs Engpass zu beheben.

Dies ist eine zweiteilige Erkundung. Teil 1 konzentriert sich auf die Vorteile von SASS -Benutzern, pr?sentiert Kernprinzipien, Leistungsverbesserungen und eine interaktive Demo. Teil zwei befasst sich mit den technischen Details der Geschwindigkeitsoptimierung von Microthemer und untersucht das Potenzial eines NPM -Pakets, der einer breiteren Entwicklergemeinschaft zugute kommt.

Microthemers sofortige Sass -Zusammenstellung

Microthemer erzielt eine bemerkenswerte Leistung, indem er nur den erforderlichen Sass -Code zusammenstellt. Es ?ndert nicht die interne Zusammenstellung von Sass, sondern w?hlt intelligent den für die Neukompilation erforderlichen minimalen Code aus.

Dies wird erreicht, indem SASS -Entit?ten (Variablen, Mischungen usw.) und deren Verwendung verfolgt werden. Wenn sich ein Selektor ?ndert, werden nur dieser Selektor und direkt verwandte Selektoren (Freigeben von Variablen oder Erweiterung anderer) neu kompiliert. Dies h?lt die Geschwindigkeit auch bei Tausenden von Selektoren bei.

Leistungsbenchmarks

Bei 3000 Selektoren schwebt die Kompilierungszeit etwa 0,05 Sekunden und erreichte gelegentlich 0,1 Sekunden oder nur 0,01 Sekunden (10 ms). Eine Videodemonstration und ein Online-Spielplatz stehen praktischen Tests zur Verfügung.

Online -Microthemer -Spielplatz

Experimentieren Sie mit Microthemer direkt mit dem Online -Spielplatz:

1. Greifen Sie auf den Microthemer -Spielplatz zu.
2. Aktivieren Sie die SASS -Unterstützung: General → Preferences → CSS / SCSS → Enable SCSS .
3. ?ffnen Sie den vollst?ndigen Code -Editor: View → full code editor → on (für globale Variablen, Mixins usw.).
4. Kehren Sie zur Haupt -UI -Ansicht zurück: View → full code editor → off .
5. Erstellen Sie Selektoren mit der Taste der Ziel.
6. Fügen Sie dem Editor (links in der Font -Eigenschaftsgruppe) SASS -Code hinzu.
7. Zeigen Sie den kompilierten Code an: View → Generated CSS → Previous SCSS compile .
8. Importieren gro?er CSS (nicht SASS) für Skalierbarkeitstests: Packs → Import → CSS stylesheet .

Ein NPM -Paket?

Die selektive Zusammenstellung von Microthemer k?nnte als NPM -Modul verpackt werden. Ist das etwas, das Sie wertvoll finden würden? W?re ein Geschwindigkeitsschub Ihres Sass -Workflows von Vorteil? Lassen Sie es uns in den Kommentaren wissen.

Der Rest dieses Artikels richtet sich an Entwickler von Community -Tools und diejenigen, die neugierig auf die Implementierung der L?sung sind.

Der Ansatz von Microthemer zur SASS -Zusammenstellung

Lassen Sie uns vor dem Tauchen in Code die wichtigsten Designziele überprüfen:

1. Minimal Code Compilation: Kompilieren Sie nur den ge?nderten Selektor oder den minimalen Satz verwandter Selektoren.
2. Reaktionsf?higkeit: Beseitigen Sie die wahrgenommene Verz?gerung; Minimieren Sie die Verarbeitung zwischen Benutzerinteraktionen.
3. ?quivalente Ausgabe: Generieren Sie identische CSS zu einer vollst?ndigen Kompilierung, jedoch für eine Teilmenge des Codes.

Beispiele für Sass -Code

Der folgende Code zeigt Szenarien, die vom selektiven Compiler verwaltet werden: Globale Variablen, Mixin -Nebenwirkungen und erweiterte Selektoren.

Variablen, Funktionen und Mischungen

 $ Primary Color: Green;
$ sekund?rfarben: rot;
$ Dark-Color: Schwarz;

@Function Torem ($ px, $ rootsize: 16) {
  @Return #{$ px / $ rootSize} rem;
}

@mixin runded () {
  Border-Radius: 999px;
  $ sekund?rfarben: blau! global;
}

Selektoren

 .Entry-title {
  Farbe: $ Dark-Color;
}

.BTN {
  Anzeige: Inline-Block;
  Polsterung: 1em;
  Farbe: wei?;
  Textdekoration: Keine;
}

.BTN-SUCCESS {
  @extend .BTN;
  Hintergrundfarbe: $ Primary-Color;
  @include gerundet;
}

.BTN-ERROR {
  @extend .BTN;
  Hintergrundfarbe: $ Secondary-Color;
}

@media (Min-Width: 960px) {
  .BTN-SUCCESS {
    Grenze: 4px solide verdunkler ($ prim?rfarben, 10%);
    & :: vor {
      Inhalt: "\ 2713";
      Rand-Rechts: .5EM;
    }
  }
}

Die Benutzeroberfl?che von Microthemer

MicriThemer verwendet zwei Hauptansichten:

1. Vollst?ndige Codeansicht: Ein Standard -Sass -Editor für globale Elemente.
2. Visuelle Ansicht: Eine selektorbasierte Schnittstelle, in der jeder Selektor ein separates UI-Element ist.

Dieser granulare Selektoransatz erm?glicht eine hocheffiziente Analyse. (Hinweis: Die blaue Fehlertaste in früheren Screenshots ist auf einen Mixin-Nebeneffekt zurückzuführen, $secondary-color ?ndert.)

Bibliotheken von Drittanbietern

Microthemer -Nutzung:

• Gonzales PE: Für Sass-to-Ast-Umwandlung.
• SASS.JS: Für Browser-basierte Sass-to-CSS-Zusammenstellung (mit Webarbeitern).

Datenstrukturen

Die Kerndatenstrukturen sind für die effiziente Verarbeitung von entscheidender Bedeutung. MicriThemer verwendet vier HauptjavaScript -Objekte:

1. projectCode : Speichert alle Projektcode, die für einzelne Selektoren segmentiert sind.
2. projectEntities : Verfolgt Variablen, Funktionen, Mixins, Erweiterungen, Importe und deren Standorte.
3. connectedEntities : Karten -Code -Abh?ngigkeiten von SASS -Entit?ten.
4. compileResources : H?lt Daten für die selektive Zusammenstellung.

Die detaillierte Erl?uterung dieser Objekte und ihrer Eigenschaften (z. B. projectCode , itemData , projectEntities , itemDeps , connectedEntities , compileResources ) ist umfangreich und würde die L?nge dieser bereits langen Reaktion erheblich erh?hen. Das Kernkonzept ist jedoch, dass diese Strukturen eine effiziente Verfolgung von Abh?ngigkeiten und die Auswahl nur des erforderlichen Code für die Neukompilation erm?glichen.

Die Funktion gatherCompileResources mit Rekursion identifiziert und sammelt intelligent alle abh?ngigen Codesegmente zur Kompilierung. Der Anwendungsprozess erstellt dann diesen minimalen Codesatz und aktualisiert die Stile.

überlegungen für ein NPM -Paket

Die Anpassung für ein NPM -Paket erfordert eine Adressierung:

• Codesegmentierung: Effizientes Umgang mit gr??eren Dateien und potenziellen virtuellen Segmentierungstechniken.
• SASS -Importe: Verfolgung der SASS -Nutzung in allen Projektdateien, anstatt alle Importe wahllos einzubeziehen.

Abschluss

Dieser Ansatz bietet eine neue Methode zur selektiven Sass -Zusammenstellung. Die Zusammenstellung der nahen Instanz ist für die Live-Bearbeitung von Microthemer von entscheidender Bedeutung, k?nnte aber auch anderen Umgebungen zugute kommen. Die Entscheidung, ein NPM -Paket zu erstellen, h?ngt von der Nachfrage der Community ab. Feedback und Fragen sind willkommen.

Das obige ist der detaillierte Inhalt vonEin Beweis für das Konzept, um Sass schneller zu machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!