SASS Elternteil ansprechen

Letzte Aktualisierung : |  

SASS oder auch LESS sind Präprozessoren und ermöglichen Dir jede Menge Features, wie kompilieren Deines CSS, so dass Du am ende minimiertes CSS hast.

Aber wir haben hier viel mehr Möglichkeiten als nur den Code zu kompilieren, wir können in OOCSS schreiben also Objekt Orientiert in CSS. Wenn Du in anderen Sprachen bereits OOP nutzt wirst Du es hier auch Mögen und sobald Du Dich daran gewöhnt hast, vielleicht auch CSS vergessen :)



Wie nutze ich das Elternteil in SASS ?

Immer wieder wird der Parent Selector (Elternteil) benötigt wenn man vor allem bevorzugt in  BEM Programmiert und deshalb gibt es seit v.3.3 von SASS die Möglichkeit auf diese zu zugreifen. Wir können so auch Entwicklern die es nicht mögen, also die Suche im Editor nicht nutzen können schmackhafter machen. Wie ? Ganz einfach in dem wir den Parent genau so benennen wie die Klasse selbst, anstatt immer das selbe zu schreiben ;) In den meisten fällen wirst Du dies sehen: $parent: &;Aber dies macht keinen sinn, weil dann kann ich das gleich sein lassen wenn ich diese nicht richtig benenne und anderen Entwicklern das schwerer mache. Deshalb sollte jeder Parent in dem Scope so heissen wie die Klasse selbst heisst, es sei den es wird ein kleines Projekt.


// SASS CODE
     0  .mbt-cookie {   1      $mbt-cookie: &;  2        3      &__blockelement1 {  4    5          width: 30%;  6    7          #{$mbt-cookie}__blockelement2 {  8            9              width: 90%;  10          }  11      }  12  } 

    // CSS CODE
       0  .mbt-cookie .mbt-cookie__blockelement1 {   1      width: 30%;  2  }  3    4  .mbt-cookie .mbt-cookie__blockelement1 .mbt-cookie__blockelement2  {   5      width: 90%;  6  } 


      Arbeiten im Team mit Elternteilen

      So nun hätten wir genau das erreicht, dass wir keine Entwickler mehr ärgern. Wenn jetzt ein anderer Entwickler nach dieser Klasse sucht (oder auch einer ID) so kann er einfach, wenn nichts mit Punkt gefunden wurde auf das Dollarzeichen wechseln und schon wird er etwas finden. Wir können jetzt so oft wir wollen auf diesen zugreifen und verschachteln da das Elternteil in der gleich benannten Variable steckt.

       SASS Elternteil

      Und wenn Du jetzt denkst toll ich benutzte lieber LESS, da gibt es diese Möglichkeit auch, zwar etwas anders aber fast das Selbe Prinzip, deshalb schau hier einmal vorbei:  LESS Elternteil ansprechen

      Dein Kommentar

      * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
      Du kannst diese Tags verwenden: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
      ?

      Dieses Feld ist optional
      Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

      Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

      Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
      tnado SEO & AMP CMS © 2019 | Alle Rechte Vorbehalten
      Created with tnado SEO CMS