Neun Tipps für den besten SASS-Code

Syntaktisch großartige Stylesheets, auch bekannt als SASS, sind ein leistungsstarkes Werkzeug für Frontend-Entwickler, das einen Vorteil bei der Arbeit mit CSS bietet. Zu den vielen Vorteilen gehört, dass man CSS mit größter Leichtigkeit schreiben kann, wenn man große Projekte verwaltet, und es hilft auch beim Schreiben von trockenem CSS.

Eine der effektivsten Möglichkeiten, den Code effizient zu gestalten, ist die Strukturierung mit verschiedenen Komponenten. Und genau hier hilft Ihnen SASS.

SASS kann in zwei Syntaxen geschrieben werden:

• Eingerückte Syntax oder SASS: Sie verwendet Einrückungen anstelle von Klammern und neuen Zeilen.
  Die Dateien verwenden die SASS-Erweiterung.
  
  
   
• Sassy CSS oder SCSS: Es ist die Obermenge von CSS3. Seine Dateien verwenden die SCSS-Erweiterung.
  Jedes gültige CSS ist ein gültiges SCSS.

In diesem Artikel werden wir neun Tricks ausprobieren, um den besten SASS-Code zu schreiben, ohne viel Zeit zu verlieren. Außerdem werde ich SCSS verwenden.

Und los geht's:

1. Strukturieren Sie Ihr SASS-Projekt
   
   Die Strukturierung Ihres SASS-Projekts ist einer der wichtigsten Teile, da sie den Entwicklungsprozess von hier an bestimmt. Für die Strukturierung Ihrer SCSS-Datei können Sie Partials verwenden.
   
   Teilen Sie Ihre SCSS-Datei in kleine Einheiten oder Module auf, die einfacher zu verwalten und zu entwickeln sind.
   
   Um eine Partial-Datei zu erstellen, schreiben Sie den Dateinamen beginnend mit einem Unterstrich, z. B. _button.scss und _table.scss. Sie können diese Partial-Dateien auch mit der @import-Direktive importieren.
   
   
   
   Ein Beispiel: Nehmen wir an, Sie haben die Dateien _button.scss, _table.css und base.scss.

    // _button.scss
   .button{
   color: black;
   background:gray;
   border-radius: 5px;
   }
   
   // _table.scss
   td{
   color: red;}
   
   //base.scss
   @import ‘button’ ;
   @import ‘table’ ;
   Body{
   padding: 0px;
   font: sans-serif;
   }

   Dies wird kompiliert als:

   // base.css
   .button{
   color: black;
   background:gray;
   border-radius: 5px;
   }
   td{
   color: red;}
   Body{
   padding: 0px;
   font: sans-serif;
   }

2. Verwenden Sie den Ampersand-Selektor oder den übergeordneten Selektor (&)
   
   Er ist nützlich beim Schreiben von trockenem CSS. Trockenes CSS hilft bei der Wartung des Projekts. Normalerweise wird er in der Verschachtelung verwendet und kann leicht mit einem Beispiel erklärt werden:

   a {
    Color: red;
   
    &
    :hover {
      Text-decoration: underline;
    }
   
   }

   Dies wird kompiliert als

   a {
    Color: red;
   }
   
   a:hover {
    Text-decoration: underline;
   }

   Mit etwas Verschachtelung von Seiten:

   .page {
    &_article {
    }
    &_blog {
    }
   }

   Dies wird kompiliert als

   .page_article {
   }
   
   .page_blog {
   }

3. Verwenden Sie % (Platzhalter-Selektor), um Zeit zu sparen
   
   Der Platzhalter-Selektor wird verwendet, wenn Sie den Code wiederverwenden möchten. Er ist sehr effektiv beim Schreiben von trockenem CSS, da er die Menge an doppeltem Code reduziert. Der Platzhalter kann mit der @extend-Direktive erweitert werden, und hier wird CSS von erweiterten Selektoren generiert, aber nicht für Basis-Selektoren.

   %box {
    border: 2px solid black;
    width: 200px;
    height: 200px;
   }
   
   .blue-box {
    @extend Box;
    Background: blue;
   }
   
   .redbox {
    @extend Box;
    Background: red;
   
   }

   Dies wird kompiliert als:

   .blue-box .redbox {
    border: 2px solid black;
    width: 200px;
    height: 200px;
   
   }
   
   .blue-box {
    Background: blue;
   }
   
   .redbox {
    Background: red;
   
   }

4. Verschachteln Sie Ihren Code
   
   Die Verschachtelung ist eine einfache und effiziente Möglichkeit, Ihr SASS zu organisieren, da sie der gleichen Hierarchie wie HTML folgt. Außerdem ist sie sehr leicht zu verstehen.
   
   

   .Dairy {
    .Milk {
      Color: white;
    }
    .chocolate {
      color: brown;
    }
   }

   Dies wird kompiliert als:

   .Dairy .Milk {
    Color: white;
   }
   
   .Dairy .chocolate {
    color: brown;
   }

5. Mixins sind wichtig
   
   Mixins können wiederverwendet werden, ohne septische Klassen oder Werte bereitzustellen. Ein Mixin wird mit der @mixin-Direktive definiert. Obwohl es eine wichtige Praxis ist, ist es optional. Verwenden Sie @include gefolgt vom Namen des Mixins.
   
   Zum Beispiel:

   @mixin circle($arc) {
    Border-radius: $arc;
    -moz-border-radius: $arc;
   }
   
   .roll {
    @include circle(50px);
   }

   Kompiliert als:

   .roll{
   Border-radius: 50px;
   -moz-border-radius: 50px;
   }

6. Verwenden Sie Media Queries in SASS
   
   Der beste und bequemste Weg, Media Queries in SASS zu schreiben, ist die Verwendung der Variablen:
   
   Zum Beispiel:

   $mobile-phone: "only screen and (max-width : 767px)";
   .box{
   Color: green;
   @media #($mobile-phone){
   Color: red;
   }
   }

   Kompiliert als

   .box{
   color: green;
   }
   @media only screen and (max-width : 767px){
   .box{Color: red;}
   }

7. Verwenden Sie Funktionen für Berechnungen
   
   Eine Funktion ist ein benannter Abschnitt, der eine bestimmte Aufgabe ausführt. In SASS können Funktionen verwendet werden, um Berechnungen durchzuführen, die auf der gesamten Website verwaltet werden.
   
   Eine Funktion kann verwendet werden, um die Breite des Elements in SASS zu verwalten.

   @function calculate-width($col-span) {
     @return 100% / $col-span
   }
   
   .span-two{
    Width: calculate-width(2)
   }

   Spanne 2 Spalten, Breite = 50

8. Effiziente Nutzung von @debug, @error & @warn
   
   @debug
   Dies ist eine Reihe von Direktiven, mit denen Sie Ihren Code debuggen können. Sie wird verwendet, um den Wert des Ausdrucks in der Konsole auszugeben. Sie ist sehr ähnlich wie console.log() in Javascript, d. h. sie hindert Sie nicht daran, den Code auszuführen, und sie benachrichtigt oder gibt den Wert aus, indem sie den Wert in der Konsole ausgibt.
   
   Code:

   //variable 
   $brand-color: blue;
   // @debug
   @debug $brand-color ;

   Ausgabe:

   _color.scss:52 DEBUG : blue

   @warn
   
   Dies gibt auch den Wert des Ausdrucks an den Compiler aus, zusammen mit der Datei, in der sich eine Warnmeldung befindet, und mit einer bestimmten Zeile, wie @debug. Sie können weiterarbeiten, und es war eine gute Wahl, um über veralteten Code und Mixin-Nutzungsfehler zu informieren. Sie können die Benachrichtigung mit der Befehlszeilenoption –quiet deaktivieren.

   // Function using @warn directive 
   @function wall($height) {
   @if unit($height) ! = px {
   @warn ‘Please use pixel value only’
   }
   
   @else {
   @return ($height) * 1rem};
   
   } 
   
   element{
   Height : wall(20rem);
   }

   Ausgabe:

   WARNING: Please use pixel value only 
   Backtrace:
    src/scss/_tools/_functions.scss:9 , in function ‘wall()’ function.
   src/scss/_tools/_functions.scss: 25
   Element {
   Height : wall(20rem);
   }

   @error
   
   Es gibt den Wert des Ausdrucks als fatalen Fehler aus und stoppt den SASS-Compiler. Es ist nützlich, um Argumente für Mixins und Funktionen zu validieren. Es ist eine gute Wahl, wenn Sie den Fehler sofort beheben möchten.

   @function color-grabber($color){
   @if has-key($color-palette, $color){
    @return map-get($color-palette , $color);
   }
   @error “Invalid color”;

    

9. Verwenden Sie die Steuerdirektiven und Ausdrücke auf intelligente Weise
   
   SASS unterstützt grundlegende Steuerdirektiven wie @if, @while, @for usw. Hier werden wir @if, @for und @while besprechen. Diese werden normalerweise mit Mixins verwendet, bei denen man ein bestimmtes Styling nur unter bestimmten Bedingungen wünscht.
   
   @if 
   
   Es nimmt einen Wert entgegen und verwendet das darunter liegende Styling, wenn es andere Werte als false oder null zurückgibt.

   div {
   @if 2+2 == 4 { border : 1px solid white ;}
   }
   @if 1> 2   { border : 3px solid white ;}
   @if null  { border : 3px solid white ;}
   }

   Dies wird kompiliert zu:

   div{
    Border : 1px solid white;
   }

   @for
   
   Wenn Sie immer wieder die gleichen Stile verwenden möchten, sollten Sie die @for-Direktive verwenden.
   
   Hier wird die Zählervariable für jede Wiederholung gesetzt, um die gewünschte Ausgabe zu erhalten. Diese Direktive hat zwei Typen:

   @for $var from <start> through <end>
    Hier enthält das kompilierte Sass den <end>-Wert
   @for $k from 1 through 4 {
     .grid-#{$k} { width: 3em * $i; }
   }

   wird kompiliert zu:

   .grid-1 {
     width: 3em; }
   .grid-2 {
     Width: 6em; }
   .grid-3 {
     width: 9em; }
   .grid-4 {
     width: 12em; }

   @for $var from <start> to <end>
   
   Hier enthält das kompilierte Sass nicht den <end>-Wert

   @for $k from 1 to 4 {
     .grid-#{$k} { width: 3em * $i; }
   }

   wird kompiliert zu:

   .grid-1 {
     width: 3em; }
   .grid-2 {
     Width: 6em; }
   .grid-3 {
     width: 9em; }

   @while
   
   Die @while-Direktive nimmt einen Wert entgegen und gibt wiederholt die Menge an Styling basierend auf einer gegebenen booleschen Bedingung aus
   
   Zum Beispiel:

   $i: 3;
   @while $i > 0 {
     .block-#{$i} { width: 2em * $i; }
     $i: $i - 1;
   }

   wird kompiliert zu:

   block-3 {
     width: 6em; }
   
   .block-2 {
     width: 4em; }
   
   .block-1 {
     width: 2em; }

Ein entscheidender Punkt hier ist, Ihren Code und Ihre Praktiken einfach und konsistent zu halten. Das sollte ausreichen. Lassen Sie es mich wissen, falls ich etwas verpasst habe, lassen Sie es mich in den Kommentaren unten wissen.