Sass Techniken aus dem Schützengraben

0
39

Nachdem er bereits in der web-Entwicklung der Industrie seit mehr als 14 Jahren habe ich gesehen und geschrieben meinen Gerechten Anteil an gute und schlechte CSS-Dateien. Als ich begann, an Ramsey Lösungen vor fünf Jahren, ich wurde eingeführt, um Sass. Es blies meinen Verstand, wie nützlich es war! Ich legte Los und wollte alles lernen, was ich konnte, über it. Über die letzten fünf Jahre habe ich genutzt, eine Reihe von verschiedenen Sass Techniken und Muster und fiel in der Liebe mit etwas, das zu stehlen, Apple ‘ s nur Arbeit.

In diesem Artikel werde ich untersuchen eine Breite Palette von Themen:

  • Die Leistung des et-Zeichens
  • Variablen und Bereiche
  • Die Bedeutung der Importe
  • Mixin’ it up
  • Erste funktionelle
  • Der Selektor, um das Platzhalter versauen

In meiner Erfahrung, die balance zu finden zwischen einfach und Komplex ist die entscheidende Komponente für die Herstellung guter software. Software sollte nicht nur einfach für Menschen zu verwenden, sondern auch für dich und die anderen Entwickler zu halten in die Zukunft. Ich würde überlegen, diese Techniken werden erweitert, aber nicht unbedingt klug oder Komplex, auf Zweck!

“Jeder weiß, dass Fehlersuche ist doppelt so schwer wie das schreiben eines Programms in den ersten Platz. Also, wenn Sie so klug sind, wie Sie sein können, wenn Sie es schreiben, wie Sie jemals Debuggen?”

—Die Elemente der Programmierung und Stil (2. Auflage), Kapitel 2

Mit dem im Verstand, lassen Sie uns zuerst einen Blick auf Sass kaufmännisches und-Zeichen.

Die Leistung des et-Zeichens

Es gibt viele verschiedene Namenskonventionen, die Sie verwenden können, um die Organisation Ihrer CSS. Der, den ich mit dem am meisten Spaß ANZUG, eine Variante von BEM (kurz für B– lock, E –lement, Modifier). Wenn Sie nicht vertraut sind mit ANZUG oder BEM, würde ich empfehlen, einen Blick auf eine oder beide von Ihnen, bevor Sie fortfahren. Ich werde mit der KLAGE übereinkommen über den rest dieses Artikels.

Was Namenskonvention, die Sie wählen, ist die Basis-Idee ist, dass jedes Stil-element bekommt seine eigene Klasse name, vorangestellt mit den Namen der Komponente. Diese Idee ist wichtig für Sie, wie einige der folgenden Organisation arbeitet. Auch dieser Artikel ist deskriptiv, nicht präskriptiv. Jedes Projekt ist anders. Sie müssen das tun, was funktioniert am besten für Ihr Projekt und Ihr team.

Das kaufmännische und-Zeichen ist der Hauptgrund, warum ich mag zu verwenden, ANZUG, BEM und Konventionen wie Sie. Es ermöglicht mir, mit NIST-und scoping-ohne dass sich die beiden beißen zurück mit der Spezifität. Hier ist ein Beispiel. Ohne Verwendung des kaufmännischen und-Zeichen, die ich brauchen würde, erstellen Sie separate Auswahlen zu erstellen -Titel und -Inhalte.

.MyComponent {
.MyComponent-title {}
}

.MyComponent-Inhalt {}

// Kompiliert
.MyComponent .MyComponent-title {} // Nicht, was wir wollen. Unnötige Besonderheit!
.MyComponent-Inhalt {} // Gewünschte Ergebnis

Bei der Verwendung von FARBE, ich will das zweite Ergebnis für -Inhalte werden, wie ich Schreibe alle meine Auswahlen. So zu tun, die ich brauchen würde, wiederholen Sie den Namen der Komponente in der gesamten. Das erhöht meine chance zu vertippen mit dem Namen der Komponente, wie Schreibe ich neue Stile. Es ist auch sehr laut, wie es endet ignorieren der Anfang von vielen Selektoren, die dazu führen kann gern über offensichtliche Fehler.

.MyComponent {}
.MyComponent-title {}
.MyComponent-Inhalt {}
.MyComponent-author {}
// Etc.

Wenn dies im normalen CSS, wir würden geklebt werden, schreiben die oben. Da wir mit Sass, es ist ein viel besserer Ansatz, der das kaufmännische und-Zeichen. Das kaufmännische und-Zeichen ist erstaunlich, denn es enthält eine Referenz auf die aktuelle Selektor zusammen mit allen Eltern.

.{
// & = ‘.Ein’
.B {
// & = ‘.Ein .B’
.C {
// & = ‘.Ein .B .C’
}
}
}

Sie können im obigen Beispiel zu sehen, wie das kaufmännische und-Zeichen Referenzen jeder Selektor in der Kette, wie es geht tiefer in die verschachtelten code. Durch die Verwendung dieser Funktion schaffen wir neue Selektoren, die zimmerreserviereung, ohne das umschreiben der name der Komponente, die jeder Zeit.

.MyComponent {
&-title {}

&-Inhalt {}
}

// Kompiliert
.MyComponent {}
.MyComponent-title {}
.MyComponent-Inhalt {}

Das ist großartig, denn wir können die Vorteile des et-Zeichens, schreiben Sie den Namen der Komponente ein mal und verweisen Sie einfach den Namen der Komponente in der gesamten. Dies verringert die Wahrscheinlichkeit, dass die Komponente name ist falsch. Plus, das Dokument als ganzes wird leichter zu Lesen, ohne .MyComponent wiederholt sich alle über den code.

Es gibt Zeiten, wenn die Komponente muss eine Variante oder modifier, wie Sie genannt werden, in ANZUG und BEM. Durch ein kaufmännisches und-Muster macht es einfacher zu erstellen, Modifikatoren.

<div class=”MyComponent MyComponent–xmasTheme”></div>
.MyComponent {
&–xmasTheme {}
}

// Kompiliert
.MyComponent {}
.MyComponent–xmasTheme {}

“Aber, was über das ändern der Kind-Elemente?” könnten Sie Fragen. “Wie sind diese Selektoren erstellt? Der Modifikator ist es nicht notwendig, auf jedes element, oder?”

Dies ist, wo die Variablen können helfen!

Variablen und Bereiche

In der Vergangenheit habe ich Modifikatoren ein paar verschiedene Möglichkeiten. Die meisten der Zeit, würde ich umschreiben das Besondere Thema name ich möchte beim ändern des Elements.

.MyComponent {
&-title {
.MyComponent–xmasTheme & {
}
}

&-content {
.MyComponent–xmasTheme & {
}
}
}

// Kompiliert
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}
.MyComponent-Inhalt {}
.MyComponent–xmasTheme .MyComponent-Inhalt {}

Dieser bekommt den job getan, aber ich bin zurück zu umschreiben, die den Namen der Komponente an mehreren Orten sein, nicht zu schweigen von den Modifikator-Namen. Es gibt bestimmt einen besseren Weg, dies zu tun. Geben Sie Sass Variablen.

Bevor wir untersuchen, Sass Variablen mit Selektoren, die wir brauchen, um zu verstehen, wie Sie zugeordnet sind. Sass-Variablen haben einen Geltungsbereich, genau wie in JavaScript, Ruby oder anderen Programmiersprachen. Wenn deklariert, die außerhalb einer Auswahl, die variable ist für jeden Selektor in das Dokument nach seiner Erklärung.

$fontSize: 1.4 rem;

.a { font-size: $fontSize; }
.b { font-size: $fontSize; }

Variablen, die innerhalb eines Selektors Gültigkeitsbereich nur, dass die Wähler und Ihre Kinder.

$fontSize: 1.4 rem;

.MyComponent {
$fontWeight: 600;
font-size: $fontSize;

&-title {
font-weight: $fontWeight; // Funktioniert!
}
}

.MyComponent2 {
font-size: $fontSize;

&-title {
font-weight: $fontWeight; // erzeugt eine “Undefinierte variable” Fehler
}
}

Wir wissen, dass Variablen speichern kann, die font-Namen, zahlen, Farben, etc. Wussten Sie, dass es kann auch speichern Selektoren? Verwenden von string-interpolation, wir können neue Selektoren mit der variable.

// Sass string-interpolation syntax ist #{VARIABLE}
$block: “.MyComponent”;

#{$block} {
&-title {
#{$block}–xmasTheme & {
}
}
}

// Kompiliert
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}

Das ist cool, aber die variable ist Global. Wir lösen können, indem die $block-variable in der Komponenten-Deklaration, die würde Umfang es auf diese Komponente. Dann können wir wieder die $block-variable, die in anderen Komponenten. Dies hilft TROCKENE bis das Thema modifier.

.MyComponent {
$block: ‘.MyComponent’;

&-title {
#{$block}–xmasTheme & {
}
}

&-content {
#{$block}–xmasTheme & {
}
}
}

// Kompiliert
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}
.MyComponent-Inhalt {}
.MyComponent–xmasTheme .MyComponent-Inhalt {}

Dies ist näher, aber wieder, wir haben zu schreiben, das Thema Namen wieder und wieder. Let ‘ s speichern, in einer variable zu!

.MyComponent {
$block: ‘.MyComponent’;
$xmasTheme: ‘.MyComponent–xmasTheme’;

&-title {
#{$xmasTheme} & {
}
}
}

Das ist viel besser! Allerdings können wir diese noch weiter zu verbessern. Variablen können auch speichern Sie den Wert des et-Zeichens!

.MyComponent {
$block: &;
$xmasTheme: #{&}–xmasTheme;

&-title {
#{$xmasTheme} & {
}
}
}

// Noch kompiliert
.MyComponent {}
.MyComponent-title {}
.MyComponent–xmasTheme .MyComponent-title {}

Nun, das ist, was ich Rede! “Caching” der Wahlschalter für und-Zeichen ermöglicht uns unsere Modifikatoren an der Spitze und halten das Thema Modifikationen mit dem element es ändern.

“Sicher, das funktioniert auf der obersten Ebene”, sagen Sie. “Aber was ist, wenn Sie verschachtelt sind wirklich tief, wie acht Stufen?” Sie Fragen großen Fragen.

Egal wie tief das nest, dieses Muster funktioniert immer, weil die wichtigste Komponente name ist nie angebracht, um den Kindern, Dank der ANZUG Namenskonvention und kaufmännische und-Zeichen-combo.

.MyComponent {
$block: &;
$xmasTheme: #{&}–xmasTheme;

&-content {
font-size: 1.5 rem;
Farbe: blau;

ul {
li {
stark {
span {
&::before {
background-color: blue;

#{$xmasTheme} & {
background-color: red;
}
}
}
}
}
}
}
}

// Kompiliert
.MyComponent-content {
font-size: 1.5 rem;
Farbe: blau;
}

.MyComponent-content ul li strong span::before {
background-color: blue;
}

/*
* Das Thema ist noch immer an den Anfang des Selektors!
* Nun, wir müssen nie schreiben, tief verschachtelten Sass, die schwer zu pflegen und
* extrem spröde: https://css-tricks.com/sass-selector-combining/
*/
.MyComponent–xmasTheme .MyComponent-content ul li strong span::before {
background-color: red;
}

Code-Organisation ist der Hauptgrund, warum ich mag dieses Muster.

  • Es ist relativ TROCKEN
  • Es unterstützt die “opt-in” – Ansatz, der dafür sorgt, Modifikatoren mit den Elementen, die Sie ändern
  • Benennung Zeug ist hart, aber dadurch können wir die Wiederverwendung von gemeinsamen element-Namen wie “Titel” und “Inhalt”
  • Es ist low-heben Sie zum hinzufügen eines Modifikators auf eine Komponente, indem der modifier-Klasse auf der übergeordneten Komponente

“Hhhmmmmm… nicht, dass bekommen, schwer zu Lesen, aber nachdem Sie eine Reihe von verschiedenen Komponenten? Woher weißt du, wo du bist, wenn alles benannt ist, &- Titel und &-Inhalte?”

Sie weiterhin Fragen, große Fragen. Wer hat gesagt, die Quelle Sass hatte in einer Datei? Wir importieren diese Komponenten, so wenden wir uns zu diesem Thema!

Die Bedeutung der Importe

Credit: @Julien_He

Einer Sass im besten features ist der @import. Wir können erstellen Sie separate Sass-Dateien (Teiltöne) und importieren Sie Sie in anderen Sass Dateien, kompilieren Sie zusammen mit der importierten Datei befindet sich an der Stelle, die es importiert. Dies macht es leicht zu Verpacken, die Verwandte Stile für Komponenten, Dienstprogramme, etc. und ziehen Sie Sie in einer einzigen Datei. Ohne @import -, wir bräuchten einen link zu separaten CSS-Dateien (Schaffung zahlreicher Netzwerk-requests, die ist badong) oder schreiben Sie alles in einem einzigen stylesheet (das ist schwer zu navigieren und pflegen).

.Component1 {
&-title {}
&-Inhalt {}
&-author {}
}

.Component2 {
&-title {}
&-Inhalt {}
&-author {}
}

.Component3 {
&-title {}
&-Inhalt {}
&-author {}
}

.Component4 {
&-title {}
&-Inhalt {}
&-author {}
}

.Component5 {
&-title {}
&-Inhalt {}
&-author {}
}

// Ein paar hundert Zeilen später…

.Component7384 {
&-title {}
&-Inhalt {}
&-author {}
}

// WO BIN ICH?

Eine der beliebtesten Methoden für die Organisation von Sass-Dateien 7-1 Muster. Insgesamt sieben verschiedene Ordner mit Sass-Dateien importiert werden, in einem einzigen Sass-Datei.

Diese Ordner sind:

  • abstracts
  • base
  • Komponenten
  • layout
  • Seiten
  • Themen
  • Anbieter

Die Verwendung von @import, um ziehen Sie jede Sass-Datei in diesen Ordner in den Haupt-Sass-Datei. Wir möchten, importieren Sie Sie in der folgenden Reihenfolge, um zu gewährleisten, Umfang und vermeiden Sie Konflikte während der Kompilierung:

  1. abstracts
  2. Anbieter
  3. base
  4. layout
  5. Komponenten
  6. Seiten
  7. Themen

@import “abstracts/Variablen’;
@import “abstracts/Funktionen’;
@import “abstracts/Mixins in Verbindung’;

@import “Verkäufer/-einige third-party-Komponente”;

@import “base/normalisieren’;

@import “layout/navigation’;
@import “layout/header’;
@import “layout/footer’;
@import “layout/sidebar’;
@import “Layouts/Formularen’;

@import “components/Tasten’;
@import “components/held’;
@import ” components/pull-quotes)’;

@import ‘- Seiten/home’;
@import ‘pages/Kontakt’;

@import “themes/default’;
@import “themes/admin’;

Sie können oder möglicherweise nicht verwenden wollen, alle diese Ordner (ich persönlich glaube nicht, verwenden Sie den theme-Ordner da ich ständig Themen mit Ihren Komponenten), aber die Idee der Trennung alle Stile in verschiedene Dateien macht es einfacher zu verwalten und zu finden code.

Weitere Vorteile dieses Ansatzes:

  • Kleine Komponenten sind einfacher zu Lesen und zu verstehen
  • Das Debugging wird dadurch einfacher
  • Es ist klarer zu bestimmen, wenn eine neue Komponente erstellt werden soll — etwa wenn eine einzelne Komponente Datei wird zu lang, oder die Selektor-Kette ist zu Komplex
  • Dies unterstreicht erneut die Nutzung — beispielsweise könnte es Sinn machen, zu verallgemeinern drei-Komponenten-Dateien, die im wesentlichen die gleiche Sache zu tun in einer Komponente

Apropos re-Nutzung gibt es schließlich Muster, die erhalten oft benutzt. Das ist, wenn wir erreichen für Mixins in Verbindung.

Mixin’ it up

Mixins in Verbindung sind eine gute Möglichkeit zur Wiederverwendung von Formatvorlagen im gesamten Projekt. Wir gehen durch ein einfaches mixin und dann geben wir es ein bisschen Intelligenz.

Die designer arbeiten mit auf einer regelmäßigen basis legt immer font-size, font-weight und line-height auf bestimmte Werte. Ich fand mich Typisierung alle drei jedes mal musste ich passen Sie die Schriftarten, die für eine Komponente oder ein element, so habe ich ein mixin zu schnell die Werte einstellen. Es ist wie eine kleine Funktion, die ich verwenden können, um zu definieren, diese Eigenschaften, ohne zu schreiben, Sie in vollem Umfang.

@mixin text($size, $lineHeight, $Gewicht) {
font-size: $size;
line-height: $lineHeight;
schriftart-Gewicht: $Gewicht;
}

An diesem Punkt, der mixin ist ziemlich einfach—es ähnelt etwas wie eine Funktion in JavaScript. Es ist der name des Mixins – (text -) und es nimmt drei Argumente. Jedes argument ist gebunden an eine CSS-Eigenschaft. Wenn das mixin genannt wird, Sass kopieren der Eigenschaften und der pass, der in der argument-Werte.

.MyComponent {
@text(18px, 27px, 500);
}

// Kompiliert
.MyComponent {
font-size: 18px;
line-height: 27px;
font-weight: 500;
}

Während es ist eine gute demonstration dieser speziellen mixin ist ein wenig begrenzt. Er meint, wir wollen immer verwenden den font-size, line-height und font-weight Eigenschaften, wenn es aufgerufen wird. So lasst uns es verwenden Sass’ if-Anweisung, um zu helfen Steuern die Ausgabe.

@mixin text($size, $lineHeight, $Gewicht) {
// Wenn die $Größe-argument nicht leer ist, dann wird die Ausgabe der argument –
@wenn $size != null {
font-size: $size;
}

// Wenn die $lineHeight argument nicht leer ist, dann wird die Ausgabe der argument –
@wenn $lineHeight != null {
line-height: $lineHeight;
}

// Wenn die $Gewicht argument ist nicht leer, dann Ausgang das argument
@wenn $Gewicht != null {
schriftart-Gewicht: $Gewicht;
}
}

.MyComponent {
@text(12px, null, 300);
}

// Kompiliert
.MyComponent {
font-size: 12px;
font-weight: 300;
}

Das ist besser, aber nicht ganz da. Wenn ich versuche, die Mixins, ohne mit null als parameter auf die Werte, die ich nicht wollen, zu verwenden oder bereitzustellen, Sass, wird ein Fehler generiert:

.MyComponent {
@text(12px, null); // Links aus $Gewicht
}

// Kompiliert, um einen Fehler:
// “Mixin text fehlt-argument $Gewicht.”

Um dies zu umgehen, können wir hinzufügen, default-Werte die Parameter, die es uns ermöglicht, Sie zu verlassen Sie die Funktion aufrufen. Alle optionalen Parameter deklariert werden müssen, nachdem alle erforderlichen Parameter.

// Wir definieren `null` als default-Wert für jedes argument
@mixin text($size: null, $lineHeight: null, $Gewicht: null) {
@wenn $size != null {
font-size: $size;
}

@wenn $lineHeight != null {
line-height: $lineHeight;
}

@wenn $Gewicht != null {
schriftart-Gewicht: $Gewicht;
}
}

.MyComponent {
&-title {
@text(16px, 19px, 600);
}

&-Autor {
@text($Gewicht: 800, $size: 12px);
}
}

// Kompiliert
.MyComponent-title {
font-size: 16px;
line-height: 19px;
font-weight: 600;
}

.MyComponent-Autor {
font-size: 12px;
font-weight: 800;
}

Nicht nur Standard-argument-Werte die mixin einfacher zu bedienen, aber wir haben auch die Fähigkeit erlangen, name, Parameter und geben Sie diese Werte werden Häufig verwendet. Auf der Linie 21 über die mixin aufgerufen mit den Argumenten nicht in Ordnung, aber da die Werte sind als gut, Mixins weiß, wie man Sie anwendet.

Gibt es eine bestimmte mixin, die ich auf einer täglichen basis verwenden: min-width. Ich lieber alle meine Websites, mobile-first, oder grundsätzlich mit dem kleinsten viewport in den Sinn. Wie der viewport wird breiter, ich definiere Haltepunkte anpassen, das layout und den code für Sie. Dies ist, wo ich zu erreichen für die min-Breite mixin.

// Nennen wir diese “min-width” und nehmen ein einzelnes argument können wir
// definieren der viewport-Breite, in einem media-query.
@mixin min-width($threshold) {
// Wir sind das aufrufen einer weiteren Funktion (SCUT sein-rem) zu konvertieren, Pixel-rem-und rem-Einheiten.
// Wir behandeln werden, dass in den nächsten Abschnitt.
@media screen and (min-width: SCUT sein-rem($threshold)) {
@content;
}
}

.MyComponent {
display: block;

// Aufruf der min-Breite mixin und pass 768 als argument.
// min-width geht 768 und SCUT sein-rem konvertiert die Einheit.
@enthalten, min-width(768) {
display: flex;
}
}

// Kompiliert
.MyComponent {
display: block;
}

@media screen and (min-width: 48rem) {
.MyComponent {
display: flex;
}
}

Es gibt ein paar neue Ideen hier. Das mixin ist eine verschachtelte Funktion namens @Inhalt. Also, in der .MyComponent Klasse, wir sind nicht mehr aufrufen Mixins allein, sondern auch ein code-block, der bekommt die Ausgabe innerhalb des Medien-Abfrage, die generiert. Der resultierende code wird kompiliert, wo @Inhalt aufgerufen wird. Dies ermöglicht es der Mixins zu kümmern, die @media-Deklaration und noch akzeptieren benutzerdefinierte code für die jeweilige Haltepunkt.

Ich bin auch einschließlich der mixin innerhalb der .MyComponent Erklärung. Einige Leute befürworten wir alle reagieren Anrufe in ein separates stylesheet zu reduzieren die Menge der Zeiten, die @media ist geschrieben in einem stylesheet. Persönlich, ich bevorzuge, um alle Variationen und Veränderungen, die eine Komponente kann durch Sie mit, dass die Komponente in der Erklärung. Es neigt dazu, machen es leichter zu verfolgen, was Los ist und helfen der Komponente Debuggen, wenn etwas nicht klappt, anstatt Sichtung durch mehrere Dateien.

Haben Sie bemerkt, eine Art von Physischer-rem-Funktion drin? Das ist eine Sass-Funktion in einem Sass-Bibliothek namens SCUT sein, erstellt von David Clark. Nehmen wir mal schauen, wie das funktioniert.

Erste funktionelle

Eine Funktion unterscheidet sich von einer mixin in diesem Mixins in Verbindung sind gedacht, um die Ausgabe gemeinsamer Gruppen von Eigenschaften, während eine Funktion ändert, die Eigenschaften, basierend auf Argumenten, die eine neue Folge. In diesem Fall, SCUT sein-rem nimmt ein pixel-Wert ist und wandelt es in ein rem Wert. Dies ermöglicht uns zu denken, in Pixel, während der Arbeit mit rem Einheiten hinter die kulissen zu vermeiden, math.

Ich habe vereinfacht SCUT sein-rem in diesem Beispiel, weil es hat ein paar zusätzliche features nutzen, die Schleifen und Listen”), die außerhalb des Anwendungsbereichs von dem, was wir abdecken hier. Schauen wir uns die Funktion in Ihrer Gesamtheit, dann brechen Sie Schritt-für-Schritt.

// Vereinfacht von der ursprünglichen Quelle
$SCUT sein-rem-sockel: 16 !Standard;

@Funktion SCUT sein-strip-Einheit ($num) {
@return $num / ($num * 0 + 1);
}

@Funktion SCUT sein-rem ($Pixel) {
@return SCUT sein-strip-Einheit($Pixel) / $SCUT sein-rem-Basis * 1rem;
}

.MyComponent {
font-size: SCUT sein-rem(18px);
}

// Kompiliert
.MyComponent {
font-size: 1.125 rem;
}

Das erste, was zu beachten ist die Deklaration auf der Linie 2. Es ist mit !default bei der Deklaration einer variable, die sagt Sass, setzen Sie den Wert auf 16, es sei denn, diese variable ist bereits definiert. Also, wenn eine variable deklariert wird, der früher in der stylesheet mit einem anderen Wert, wird es nicht werden hier außer Kraft gesetzt.

$fontSize: 16px;
$fontSize: 12px !Standard;

.MyComponent {
font-size: $fontSize;
}

// Kompiliert
.MyComponent {
font-size: 16px;
}

Das nächste Stück des Puzzles ist es, SCUT sein-strip-Einheit. Diese Funktion nimmt ein px, rem, Prozent oder anderen mit dem Suffix-Wert und entfernt die Einheit label. Aufruf SCUT sein-strip-Einheit(12px) gibt 12 statt 12px. Wie funktioniert das? In Sass, eine Einheit dividiert durch eine andere Einheit des gleichen Typs Streifen die Einheit und Rückkehr der Ziffer.

12px / 1 x = 12

Jetzt, da wir wissen, dass, lassen Sie uns einen Blick auf die SCUT sein-strip-Einheit-Funktion wieder.

@Funktion SCUT sein-strip-Einheit ($num) {
@return $num / ($num * 0 + 1);
}

Die Funktion nimmt in einer Einheit, und dividiert es durch die 1 von der gleichen Einheit. Also, wenn wir gehen 12px, die Funktion würde wie folgt Aussehen: @return 12px / (12px * 0 + 1). Nach der Reihenfolge der Operationen, Sass ausgewertet, was in den Klammern zuerst. Sass elegant ignoriert die px-label wertet den Ausdruck aus, und wendet px wieder auf, sobald es fertig ist: 12 * 0 + 1 = 1px. Die Gleichung ist nun 12px / 1px denen wir wissen, gibt 12.

Warum ist das wichtig, um SCUT sein-rem? Sieht aus, schauen Sie es wieder.

$SCUT sein-rem-sockel: 16 !Standard;

@Funktion SCUT sein-rem ($Pixel) {
@return SCUT sein-strip-Einheit($Pixel) / $SCUT sein-rem-Basis * 1rem;
}

.MyComponent {
font-size: SCUT sein-rem(18px);
}

Auf der Linie 4, der SCUT sein-strip-Einheit-Funktion entfernt px aus dem argument und gibt 18. Die base-variable ist gleich 16, die sich die Formel in: 18 / 16 * 1rem. Denken Sie daran, Sass ignoriert jede Einheit bis zum Ende der Gleichung ein, so 18 / 16 = 1.125. Das Ergebnis multipliziert mit 1rem gibt uns 1.125 rem. Da SCUT sein Streifen Sie das Gerät aus, mit dem argument, wir nennen SCUT sein-rem mit unit-weniger Werte, wie SCUT sein-rem(18).

Ich nicht schreiben, dass viele Funktionen, da ich versuche, die Sachen, die ich erstellen so einfach wie möglich. In der Lage zu tun einige komplexe Konversionen mit so etwas wie SCUT sein-rem ist hilfreich, wenn.

Der Selektor, um das Platzhalter versauen

Am Ende, wo ich denke, das Tat es, das CSS?

Ich weiß wirklich nicht, wie, Platzhalter zu verwenden und @extend in meinem code. Ich finde es einfach, sich in Schwierigkeiten mit ein paar verschiedenen Gründen.

Seien Sie vorsichtig, was ist der erweiterte

Ich habe versucht zu schreiben, einige Beispiele zu zeigen, warum mit @extend kann problematisch sein, aber ich habe Sie so wenig, dass ich nicht erstellen kann jeder anständige Beispiele. Als ich zum ersten mal Sass, war ich umringt von Teamkollegen, die schon wieder Weg durch die Irrungen und Wirrungen. Mein Freund Jon BeBees schrieb ein extrem ausgezeichnete Artikel auf, wie @erweitern können erhalten Sie in Schwierigkeiten. Es ist eine schnelle lese-und die Zeit Wert, so werde ich warten.

Über diese Platzhalter…

Jon schlägt vor, die Verwendung von Platzhaltern als eine Lösung für das problem, das er beschreibt: Platzhalter nicht ausgeben jeden code, bis Sie verwendet werden, mit @extend.

// % steht für einen erweiterten block
%item {
display: block;
width: 50%;
margin: 0 auto;
}

.MyComponent {
@extend %Element;
Farbe: blau;
}

// Kompiliert
.MyComponent {
display: block;
width: 50%;
margin: 0 auto;
}

.MyComponent {
Farbe: blau;
}

OK, warten Sie. So ist es-Ausgang .MyComponent zweimal? Warum ist es nicht einfach kombinieren Sie die Selektoren?

Dies sind die Fragen, die ich hatte, als ich begann, mit Platzhaltern (und dann aufgehört). Der Hinweis ist der name selbst. Platzhalter halten Sie einfach einen Verweis auf die Stelle im stylesheet deklariert waren. Während ein mixin kopiert die Eigenschaften der Lage ist verwendet, um Platzhalter kopieren Sie den Wahlschalter auf die Stelle, wo der Platzhalter definiert wurde. Als Ergebnis, es kopiert die .MyComponent Selektor und Orte, wo %Element deklariert ist. Betrachten Sie das folgende Beispiel:

%flexy {
display: flex;
}

.{
Farbe: blau;
}

.B {
@verlängern: %flexy;
Farbe: grün;
}

.C {
@verlängern: %flexy;
Farbe: rot;
}

// Kompiliert
.B, .C {
display: flex;
}

.{
Farbe: blau;
}

.B {
Farbe: grün;
}

.C {
Farbe: rot;
}

Obwohl B und C deklariert sind weiter unten im stylesheet werden die Platzhalter stellen die erweiterten Eigenschaften hoch der Weg bis zu dem es ursprünglich deklariert. Das ist keine große Sache, in diesem Beispiel, weil es wirklich nah an der Quelle, wo es verwendet wird. Jedoch, wenn wir die Einhaltung so etwas wie das 7-1 Muster bedeckten wir früher, dann Platzhalter definiert werden würde in einer teilweise in die abstracts-Ordner, in dem einer der ersten importierten Dateien. Das setzt eine Menge von Stil, zwischen denen das verlängern soll und wo es tatsächlich gebraucht wird. Das kann schwierig sein, zu pflegen sowie schwer zu Debuggen.

Sass-Richtlinien (natürlich) hat einen tollen job für Platzhalter und erweitern, und ich würde empfehlen, es zu Lesen. Es erklärt nicht nur die Funktion erweitern, aber am Ende, setzt sich gegen die Verwendung von es:

Die Meinungen scheinen sehr geteilt über die Vorteile und Probleme von @verlängern bis zu dem Punkt, wo viele Entwickler (inklusive mir befürwortet haben gegen Sie, […]

Es gibt viele andere Funktionen von Sass, die ich nicht hier aufzählen, wie Schleifen und Listen, aber die hab ich ehrlich gesagt noch nicht verlassen auf diese Funktionen so viel, wie die, die wir haben in diesem Artikel behandelt. Werfen Sie einen Blick durch die Sass-Dokumentation, wenn für nichts anderes, um zu sehen, was Dinge tun. Sie können nicht finden, eine Verwendung für alles auf Anhieb, aber die situation kann kommen und mit diesem wissen im Rücken ist unbezahlbar.

Lassen Sie mich wissen, wenn ich etwas übersehen oder etwas falsch! Ich bin immer offen für neue Ideen und würde gerne diskutieren Sie mit Ihnen!

Weiter Lesen

  • Sass Style Guide – Gedanken und Empfehlungen für das halten von Sass sauber und wartbar.
  • Was für ein CSS-Code-Review Aussehen Könnte, vor allem sieht das bei CSS, umfasst aber auch Tipps zur code-review Sass-Dateien.
  • Die Definition und der Umgang mit Technischen Schulden – Wir redeten viel über CHEMISCHE Methoden und die Effizienz in diesem Artikel. Dieser Beitrag spricht über die unterschiedlichen Folgen von verbose oder ineffizienten code.
  • Schleifen in CSS-Präprozessoren – we didn ‘ T decken die Schlingen hier, aber Miriam Suzanne geht in die Tiefe in diesem Artikel.
  • Sass Snippets – Eine Sammlung von praktischen Sass Mixins in Verbindung und der andere Sass Muster.