Media Queries, Sass 3.2 und CodeKit

Media Queries sind bereits genial. Media Queries in Sass sind bereits genial. Media Queries in Sass 3.2 werden wirklich genial sein. So können Sie CodeKit dazu bringen, sie zu verwenden.

Das ist keine brandneue Idee. Ben Schwarz hat vor 7 Monaten ein exzellentes 7-minütiges Video gezeigt, das erklärt, wie es funktioniert. Jeff Croft schrieb vor 4 Monaten darüber. Mason Wendell schrieb vor 3 Monaten darüber.

Der Zauber liegt also darin

Das können Sie bereits in der stabilen Version von Sass (3.1.2) tun

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

Sass wird es wie folgt in gültiges CSS umwandeln

.column-1-3 {
  width: 33.3333%;
}
@media (max-width: 600px) {
  .column-1-3 {
    width: 100%;
  }
}

Aber Sie möchten das vielleicht **zigtausendmal** in Ihrem CSS tun, weil es so unglaublich praktisch ist und so viel Sinn ergibt, wenn Sie es schreiben (anstatt alles am Ende zusammenzufassen, was kognitive Verbindungen unterbricht).

Jetzt stecken Sie in der Wiederholung fest, was genau Sass uns ersparen will. In Sass 3.2 (das sich im Alpha-Stadium befindet und das schon lange) gibt es eine Lösung. Wir können ein @mixin schreiben, das uns erlaubt, Media Queries zu "benennen".

I

1. Wie das Benennen von Media Queries nach "Breakpoints"
2. Sie mögen die Idee nicht, sie nach etwas Spezifischem zu benennen, wie z.B. "iPad"
3. Wie Märchenanalogien

Also schreibe ich meinen Mixin so

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 650px)  { @content; }
  }
}

Jetzt kann ich Code schreiben wie

.page-wrap {
  width: 75%;
  @include breakpoint(papa-bear) { width: 60%; }
  @include breakpoint(mama-bear) { width: 80%; }
  @include breakpoint(baby-bear) { width: 95%; }
}

Und es wird genau so funktionieren, wie ich es will. Cool, oder? (Hinweis: Das ist rein willkürlicher Code zur Veranschaulichung, die Verwendung hängt vom Projekt ab)

Aber was ist, wenn Sie CodeKit verwenden?

CodeKit liefert, zu Recht, nur die stabile Version von Sass mit, die dies noch nicht unterstützt. Ich habe keine Ahnung, wann Sass 3.2 stabil wird. Es ist mindestens 7 Monate her und ich war persönlich darauf bedacht, das in Gang zu bringen. Glücklicherweise liefert CodeKit kürzlich eine neue Funktion, die dies ermöglicht.

Ab CodeKit Version 1.2 (6449) können Sie CodeKit nun anweisen, einen externen Compiler zu verwenden

So bringen Sie es zum Laufen

1. Stellen Sie sicher, dass Sie mindestens diese Version von CodeKit haben
2. Öffnen Sie das Terminal
3. Geben Sie rvm system ein. Ich weiß nicht genau, was das tut, aber CodeKit kann mit Sass, das in rvm-Verzeichnissen installiert ist, nicht umgehen.
4. Installieren Sie dann Sass 3.2 mit dem Befehl sudo gem install sass --pre – Sie müssen möglicherweise Ihr Passwort eingeben.
5. Sass sollte jetzt im Verzeichnis /usr/bin/ installiert sein
6. Öffnen Sie die CodeKit-Einstellungen und gehen Sie zu Sprachen und Sass/Scss
7. Klicken Sie unter Erweiterte Compiler-Einstellungen auf Auswählen...
8. Wählen Sie die Sass-Datei in diesem Verzeichnis aus

Und fertig. Beachten Sie, dass Sie nun für die Aktualisierung von Sass verantwortlich sind. Aber letztendlich wird Sass mit 3.2 final und CodeKit wird sich damit aktualisieren und wir können wieder den internen Compiler verwenden.

Viel Spaß! Es ist wirklich ein Vergnügen, auf diese Weise mit Media Queries zu arbeiten. Danke an Christopher Eppstein, der mir dabei geholfen hat. Das erinnert mich daran, dass Sie genau dasselbe mit Compass tun können, einfach sudo gem install compass und CodeKit darauf verweisen.