14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %

Vorwort

Sass ist eine Erweiterung der CSS3-Sprache. Sie kann Ihnen dabei helfen, einfacher bessere Stylesheets zu schreiben, befreit Sie von sich wiederholenden Arbeiten und macht Ihre Arbeit kreativer. Weil Sie Veränderungen schneller annehmen können, trauen Sie sich auch, im Design Neuerungen einzuführen. Das von Ihnen geschriebene Stylesheet kommt problemlos mit Farbänderungen oder Modifizierungen von HTML-Tags zurecht und lässt sich für verschiedene Produktionsumgebungen in Standard-CSS-Code kompilieren. Die Sass-Syntax ist relativ einfach. Die Schwierigkeit besteht darin, Sass auf konkrete Projekte anzuwenden, die Schwachstellen von CSS zu lösen und so unsere Effizienz zu verbessern. Nach der Untersuchung tatsächlicher Projekte habe ich die folgenden 14 praktischen Erfahrungen zum Teilen zusammengefasst, in der Hoffnung, allen zu helfen, ihren Horizont zu erweitern und Sass besser auf tatsächliche Projekte anzuwenden. Im Projekt verwenden wir Scss, das die traditionelle CSS-ähnliche Syntax unterstützt. Daher wird in der folgenden Zusammenfassung der Projekterfahrung Scss als Beispiel verwendet.

1. Verwendung der Variable $

Wir können Attributwerte über Variablen wie Farbe, Rahmengröße, Bildpfad usw. wiederverwenden, sodass wir durch Ändern einer Stelle globale Änderungen vornehmen und so die Funktion des „Skins“ realisieren können.

Beispiel 1: Unsere Komponentenbibliothek verwendet eine variable Konfiguration, um Farbe, Schriftgröße usw. von Komponenten einheitlich zu ändern (Skin-Änderung):

$Farbe-Primär: #3ecacb;  
$Farberfolg: #4fc48d;  
$Farbwarnung: #f3d93f;  
$Farbgefahr: #f6588e;  
$Farbinfo: #27c6fa;

Beispiel 2: Bildkonfiguration und globaler Import

Bei der Verwendung von Bildern in Scss können zwei Probleme auftreten:

(1) Wenn sich die Stildatei und die Vue-Datei, die die Stildatei verwendet, nicht im selben Verzeichnis befinden, wird das Bild nicht gefunden.

(2) Wenn die Bildpfad-Konfigurationsvariable im Stil der Vue-Datei geschrieben ist, führt diese Schreibmethode jedoch dazu, dass Bild und Stil getrennt werden

Wir können den Bildpfad in eine Konfigurationsdatei schreiben und diese dann global importieren, sodass der Bildpfad einheitlich geändert werden kann (und diese Methode lädt das entsprechende Bild nur, wenn es verwendet wird, und verursacht keine zusätzlichen Leistungsprobleme):

$common-path: "./primary/assets/img/";  
$icon-see: $common-path+'icon-see.png';  
$icon-play: $gemeinsamer Pfad+'icon-play.png';  
$icon-comment: $common-path+'icon-comment.png';  
$icon-checkbox: $common-path+'icon-checkbox.png';

2. @import importiert Scss-Dateien

(1) Die @import-Regel in CSS ermöglicht es, andere CSS-Dateien in eine CSS-Datei zu importieren. Dies hat jedoch zur Folge, dass der Browser andere CSS-Dateien nur herunterlädt, wenn @import ausgeführt wird, was zu einem sehr langsamen Laden der Seite führt.

(2) Die @import-Regel in Scss unterscheidet sich darin, dass die @import-Regel von Scss beim Generieren von CSS-Dateien zugehörige Dateien importiert. Dies bedeutet, dass alle zusammengehörenden Stile in derselben CSS-Datei zusammengefasst werden, ohne dass zusätzliche Download-Anfragen gestellt werden müssen.

Beispiel 1: Importieren Sie in der Komponentenbibliothek die Komponentenstildateien in index.scss. Wenn die Komponentenbibliothek im Projekt verwendet wird, müssen Sie die Datei index.scss nur am Anfang des Projekts einführen. Die Stildateien jeder Komponente werden wie unten gezeigt in die Datei index.scss eingeführt:

@import "./base.scss";  
@import "./webupload.scss";  
@import "./message-hint.scss";

3. Verwendung lokaler Dateibenennung

Der Dateiname einer SCSS-Teildatei beginnt mit einem Unterstrich. Auf diese Weise kompiliert scss diese Datei nicht separat, um während der Kompilierung CSS auszugeben, sondern verwendet diese Datei nur als Import. Bei der Verwendung von SCSS sind Mixins der am besten geeignete Anwendungsfall, da Mixins nicht separat kompiliert werden müssen, um CSS-Dateien auszugeben.

Beispiel 1: Schreiben Sie den Namen des Mischpults in die lokale Dateibenennungsmethode, wie unten gezeigt

4. Verschachtelte Funktionalität von Scss und übergeordnete Selektorkennungen

Wir können verschachtelte Funktionen und übergeordnete Selektorkennungen verwenden, um die Anzahl wiederholter Codes zu reduzieren, insbesondere wenn Ihre CSS-Klassen die BEM-Benennungskonvention verwenden und die Benennung der Stilklassen lang ist. Die Verwendung dieser Funktion kann das Problem langer BEM-Benennungen lösen und den Stil lesbarer machen.

Beispiel 1: Verschachteln von Funktionen und übergeordneten Selektorkennungen und Lösen des BEM-Ausführlichkeitsproblems:

.tea-assignhw {   
 &__Spitze {    
  Rand: 0;    
}   
 &__Inhalt {   
   Polsterung links: 45px;   
 }    
&__gradeselect {  
   Breite: 158px;    
 } 
}

**Beispiel 2:** Verwendung von Kindselektoren, Geschwisterselektoren und Pseudoklassenselektoren in verschachtelten

(1) Kinderauswahl

&__Hinweis {  
  Rand: 20px;   
   Schriftgröße: 14px;   
  > p:erstes-Kind {   
     Schriftstärke: fett;    
 }  
}

(2) Geschwisterauswahl

&__Eingabe {   
 Breite: 220px;   
 & + Spanne {     
   Rand links: 10px;    
 }  
}

(3) Pseudoklassenselektor

&__durchsuchen {  
  Hintergrund: URL($btn-search) keine Wiederholung;   
&:schweben {     
  Hintergrund: URL($btn-search) -80px 0 keine Wiederholung;   
}    
&:besucht {   
  Hintergrund: URL($btn-search) -160px 0 keine Wiederholung;   
 }  
}

5. Verwendung des @mixin-Mixers und der @extend-Direktive

Mithilfe von Variablen können Sie Eigenschaftswerte wiederverwenden. Was aber, wenn Sie einen großen Teil der Regeln wiederverwenden möchten? Der traditionelle Ansatz besteht darin,

Wenn Duplikate gefunden werden, werden die gemeinsamen Regeln extrahiert und in neue CSS-Klassen eingefügt.

In Scss können Sie die Vererbungsanweisungen @mixin und @extend verwenden, um das oben genannte Szenario der Wiederverwendung eines großen Regelabschnitts zu lösen. Aber was ist der Unterschied zwischen den beiden Nutzungsszenarien?

(1) Der Hauptvorteil von @mixin besteht darin, dass es Parameter akzeptieren kann. Wenn Sie Parameter übergeben möchten, wählen Sie natürlich @mixin statt @extend, da @extend keine Parameter akzeptieren kann.

(2) Da Mixin-Regeln in andere Klassen eingemischt werden, lassen sich Duplikate im Ausgabe-Stylesheet nicht völlig vermeiden. Selektorvererbung bedeutet, dass ein Selektor alle Stile eines anderen Selektors wiederverwenden kann, ohne diese Stilattribute zu wiederholen. Verwenden Sie also @extend, um DRY-CSS-Stilcode zu generieren (Don’t repeat yourself).

Zusammenfassend lässt sich sagen, dass Sie nur den @mixin-Mixer verwenden können, wenn Sie Parameter übergeben müssen. Andernfalls ist es besser, die @extend-Vererbung zu verwenden.

Beispiel 1: Verwendung des @mixin-Mixers

@mixin paneactive($Bild, $Ebene, $vertikal) {   
  Hintergrund: URL($Bild) keine Wiederholung $Ebene $vertikal;    
  Höhe: 100px;    
  Breite: 30px;   
  Position: relativ;    
  oben: 50 %;  
}  
&--links-aktiv {    
  @include paneactive($btn-flip, 0, 0);  
}  
&--rechts-aktiv {   
  @include paneactive($btn-flip, 0, -105px);  
}

Beispiel 2: Verwendung der @extend-Vererbung

.allgemeiner-mod {    
  Höhe: 250px;   
  Breite: 50%;    
  Hintergrundfarbe: #fff; 
  Textausrichtung: zentriert;  
}  
&-mod {   
  @erweitern .common-mod;    
  schweben: rechts; 
 }  
&-mod2 {   
  @erweitern .common-mod;  
}

6. Verwendung der Standardparameterwerte des @mixin-Mixers

Wenn Sie einen Mixer mit @include verwenden, müssen Sie nicht alle Parameter übergeben. Sie können einen Standardwert für den Parameter angeben. Wenn der Parameter, den Sie übergeben müssen, der Standardwert ist, können Sie den Parameter beim Aufruf von @include weglassen. Wenn der Parameter, den Sie übergeben müssen, nicht der Standardwert ist, können Sie beim Aufruf von @include einen neuen Parameter übergeben.

Beispiel 1: Verwenden der Standardparameterwerte des @mixin-Mixers

@mixin-Bereich($dir: links) {    
  Breite: 35px;   
  Anzeige: Block;    
  float: $dir;    
  Hintergrundfarbe: #f1f1f1;  
}  
&__panelft {   
  @include-Bereich;  
}  
&__paneright {  
  @include-Bereich (rechts);  
}

7. Verwendung der #{}-Interpolation

Mit der Interpolationsanweisung #{} können Sie Variablen in Selektoren oder Attributnamen verwenden. Wenn es zwei Seiten mit ähnlichen Stilen gibt, extrahieren wir die ähnlichen Stile in einen Seitenmixer, aber die Namen zweier unterschiedlicher Seitenstile können gemäß der BEM-Namensspezifikation nicht gleich sein. Zu diesem Zeitpunkt können wir Interpolation für dynamische Benennung verwenden.

Beispiel 1: Dynamisches Festlegen von Klassennamen in Mixern auf Seitenebene mithilfe der #{}-Interpolation

@mixin Home-Inhalt($Klasse) {   
 .#{$klasse} {     
   Position: relativ;  
    Hintergrundfarbe: #fff;   
    Überlauf-x: versteckt;    
    Überlauf-y: versteckt;    
  &--links {      
    Rand links: 160px;  
  }     
  &--noleft {   
     Rand links: 0;    
 }   
 }  
}

8. Nutzung von Operationen

SassScript unterstützt Addition, Subtraktion, Multiplikation, Division und ganzzahlige Operationen (+, -, *, /, %).

Beispiel 1: Die Eingabekomponente legt die linke und rechte Polsterung entsprechend der Höhe des Eingabefelds fest, wie unten gezeigt:

ps-Eingabe {   
   Anzeige: Block;    
   &__inner {     
    -webkit-auftritt: keines;    
     Polsterung links: #{$--input-height + 10  
   };      
     Polsterung rechts: #{$--input-height + 10  
   };     
  }  
}

9. Anwendung verwandter integrierter SCSS-Funktionen

scss verfügt über einige Funktionen, wie z. B. HSL, Mix-Funktionen usw.

**Beispiel 1: Die Klickfarbe der Schaltflächenkomponente besteht darin, mehrere Farben in einem bestimmten Verhältnis miteinander zu mischen, um eine andere Farbe zu erzeugen. **Wie unten gezeigt:

&:Fokus {   
  Farbe: mischen($--color-white, $--color-primary, $--button-hover-tint-percent);    
  Rahmenfarbe: transparent;    
  Hintergrundfarbe: transparent;}  
&:aktiv {    
  Farbe: mischen($--color-black, $--color-primary, $--button-active-shade-percent);   
  Rahmenfarbe: transparent; Hintergrundfarbe: transparent;  
}

10. Anwendung verwandter integrierter SCSS-Funktionen

Die @for-Direktive kann einen Stil innerhalb eines begrenzten Bereichs wiederholt ausgeben und jedes Mal wird das Ausgabeergebnis entsprechend dem Wert der Variablen geändert.

Beispiel 1: Beispielsweise müssen im Projekt die Stile der 2. bis 8. Div-Unterknoten unter der Klasse hwicon wie folgt festgelegt werden:

@für $i von 2 bis 8 {    
.com-hwicon {      
 > div:n-tes-Kind(#{$i}) {  
    Position: relativ;  
    schweben: rechts;    
   }    
 }  
}

11. Bei jeder Durchquerung werden Datentypen, @mixin/@include-Mixer und #{} Interpolation kombiniert verwendet

Durch die Kombination von Durchquerung, Kartendatentyp, @mixin/@include-Mixer und #{}-Interpolation können unterschiedliche Selektorklassen generiert werden. Das Hintergrundbild ist in jeder Selektorklasse unterschiedlich, wie unten dargestellt:

$img-Liste: (    
 (Zugriff auf Bild, $Papierzugriff),   
  (Ordnerbild, $Papierordner),  
  (bmpimg, $papiere-bmp),    
  (xlsimg, $Papiere-Excel),    
  (xlsximg, $Papiere-Excel),    
  (gifimg, $papiere-gif),   
  (jpgimg, $papers-jpg),    
  (unbekannt, $papers-unbekannt) 
 ); 
 @each $label, $value in $img-list { 
  .com-hwicon__#{$label}  
    @include commonImg($wert);   
 }  
}

12. Überprüfung und Verifizierung des Stilcodes - Stylelint-Plugin

CSS ist zwar keine Programmiersprache im strengen Sinne, dennoch ist ihre Bedeutung im Frontend-System nicht zu unterschätzen. CSS ist ein beschreibungsbasiertes Stylesheet. Wenn die Beschreibung verwirrend ist und keine Regeln enthält, wird sie für andere Entwickler, insbesondere für diejenigen mit Zwangsstörungen, definitiv zu einer Zeitbombe. CSS scheint einfach zu sein, aber es ist immer noch ziemlich schwierig, schönes CSS zu schreiben. Die Aktion zur Überprüfung der CSS-Regeln steht also unmittelbar bevor. Stylelint ist ein leistungsstarker moderner CSS-Checker, der es Entwicklern ermöglicht, konsistente Konventionen zu befolgen und Fehler in ihren Stylesheets zu vermeiden.

**(1) Sie müssen gulp, stylelint, gulp-postscss, postcss-reporter und stylelint-config-standard installieren. Der Installationsbefehl lautet:

npm installieren gulp stylelint gulp-postscss postcss-reporter   
stylelint-config-standard --save-dev

(2) Nach Abschluss der Installation wird im Stammverzeichnis des Projekts eine Datei gulpfile.js erstellt. Die Konfiguration der Datei gulpfile.js lautet:

var Reporter = erforderlich('postcss-Reporter');  
var stylelint = erforderlich('stylelint');  
var stylelintConfig = {    
  'erweitert': 'stylelint-config-standard',   
  'Regeln': {      
  'at-rule-no-unknown': [  
     WAHR, {        
     'ignoreAtRules': [    
     'verlängern',       
      'enthalten',  
      'mischen',       
      'für'       
      ]     
     }  
   ]  
  }  
};  
gulp.task('scss-lint', Funktion() {
    var Prozessoren = [     
    stylelint(stylelintKonfiguration),     
    Reporter({       
      clearMessages: wahr,      
      throwError: wahr      
   })    
   ];    
 Rückgabewert gulp.src(    
   ['src/style/*.scss']// SCSS-Dateien, die von Tools überprüft werden müssen.).pipe(postcss(processors));});  
 gulp.task('Standard', ['scss-lint']);

(3) stylelint-config-standard Überprüfungsregeln

stylelint-config-standard ist die von stylelint offiziell empfohlene Standardüberprüfungsregel. Spezifische Überprüfungsregeln finden Sie auf der offiziellen Website.

(4) Führen Sie den Befehl aus, um den Stil zu überprüfen. 13. Plug-In zur automatischen Stilreparatur - Stylefmt-Plug-In

stylefmt ist ein auf stylelint basierendes Codekorrekturtool. Es kann basierend auf den Codestandardkonventionen von stylelint konfiguriert werden und formatiert die Ausgabe korrigierbarer Bereiche.

(1) Die Konfigurationsdatei gulp.js sieht wie folgt aus:

var stylefmt = require('gulp-stylefmt'); // Tool zur automatischen Anpassung des CSS-Formats gulp.task('stylefmt', function() {  
  Rückgabewert gulp.src(     
  ['src/style/student/index.scss' // SCSS-Datei, die einer Tool-Überprüfung bedarf]).pipe(stylefmt(stylelintConfig))  
    .pipe(gulp.dest('src/style/dest/student'));});  
 gulp.task('fix', ['stylefmt']);

(2) Führen Sie den Befehl zum Reparieren des Stils aus, wie in der folgenden Abbildung gezeigt

14. Kompilieren Sie die SCSS-Syntax in die CSS-Syntax - Gulp-Sass-Plugin

Als wir den SCSS-Code zum ersten Mal geschrieben haben, war der durch den geschriebenen SCSS-Code erzielte Seiteneffekt aufgrund der mangelnden Vertrautheit mit der Syntax nicht das gewünschte. Derzeit können wir das Gulp-Sass-Plug-In verwenden, um den SCSS-Code zu überwachen und den CSS-Code in Echtzeit zu generieren, sodass wir durch Anzeigen des CSS-Codes beurteilen können, ob der geschriebene SCSS-Code korrekt ist.

(1) Die Konfigurationsdatei gulp.js sieht wie folgt aus:

var gulpsass = erforderlich('gulp-sass');  
gulp.task('gulpsass', Funktion() {   
  Rückgabewert für gulp.src('src/style/components/hwIcon.scss')   
  .pipe(gulpsass().auf('Fehler', gulpsass.logError))     
  .pipe(gulp.dest('src/style/dest'));});  
  gulp.task('watch', Funktion() {    
  gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']);  
});

(2) Führen Sie den Befehl aus, um die SCSS-Datei zu überwachen und den SCSS-Code dynamisch zu kompilieren, um die CSS-Codedatei zu generieren, wie in der folgenden Abbildung dargestellt

Damit ist dieser Artikel über 14 praktische Erfahrungen bei der Reduzierung von SCSS-Code um 50 % abgeschlossen. Weitere relevante Inhalte zur Reduzierung des SCSS-Stils finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!