Tool: Sass Globbing Plugin

Mit Hilfe des Sass Globbing Plugins können viele scss-Dateien auf einmal importiert werden. Sehr hilfreich beim Import einzelner Mixin-Dateien, oder wenn es viele separate Stylesheets für einzelne Module gibt.

Installation

$ gem install sass-globbing

Einbindung in config.rb

require 'sass-globbing'

Benutzung

Um beispielsweise viele einzelne Modul-Stylesheets einzubinden:

@import "_mod*";

Compass: Mehrere Css-Transformationen verknüpfen

Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der Bündelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgründen festhalten möchte.

Die transform()-Mixins von Compass

Es gibt prinzipiell drei Compass-Mixins die zum Erstellen von mehreren verknüpften Transformationen in Frage kommen:

  1. transform()
  2. create-transform()
  3. simple-transform()

Allerdings wird in der transform-Dokumentation von der Nutzung von create-transform() abgeraten:

Full transform mixins For settings any combination of transforms as arguments These are complex and not highly recommended for daily use. They are mainly here for backward-compatibility purposes.

Bleiben also lediglich transform() und simple-transform().

Compass oder Grunt-Compass?

Grundsätzlich muss unterschieden werden zwischen einem standalone laufenden Compass und dem Grunt-Task grunt-contrib-compass: Was nämlich beim standalone laufenden Compass funktioniert, muss nicht zwangsläufig beim Grunt-Compass-Task funktionieren…

Grunt

simple-transform()

Beim Aufruf von simple-transform() wird folgende Fehlermeldung ausgegeben:

(Line 565 of _transform.scss: Mixin transform-origin takes 1 argument but 4 were passed.)

Somit ist dieses Mixin nicht benutzbar.
Vielleicht habe ich auch etwas falsch gemacht. Falls ja, bin ich für Hinweise äußerst dankbar.

transform()

Für das transform()-Mixin schlägt die Dokumenation (dem Link folgen und nach @include transform suchen) folgende Notation vor:

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);

Das funktioniert nicht und wird mit der Fehlermeldung „Mixin transform-origin takes 1 argument but 2 were passed.“ quittiert. Beim Suchen nach diesem Fehler stößt man recht schnell auf die Lösung: Einfach das Komma im transform-origin-Mixin weglassen. Somit ergibt sich folgende, tatsächlich funktionierende Notation:

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100% 0%);

Äußerst wichtig: Im Gegensatz zu den beiden anderen vorgestellten Mixins kann background-origin nicht innerhalb des Mixins angegeben werden, sondern muss in einem separaten transform-origin-Mixin angegeben werden. Alles andere wäre auch zu einfach.

Standalone Compass

Benutzt man Compass ohne Grunt, sieht die Sache etwas anders aus: Dort funktioniert das simple-transform-Mixin. Zumindest so einigermaßen.

simple-transform()
@include simple-transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%);

Einigermaßen deshalb, weil das Weglassen von Werten mittendrin mit Fehlermeldungen und Nicht-Funktionieren bestraft wird. Wenn man also nicht jedes Mal alle Werte aufschreiben möchte, ist dieses Mixin doch eher ungeeignet (Fun Fact: simple-transform ist eigentlich genau das selbe wie create-transform, nur werden bereits im Voraus bestimmte Parameter exkludiert. Daher eignet es sich also nicht, wenn man beispielsweise die Perspektiv-Eigenschaft nutzen möchte. Facepalm-Smiley. Fröhlicher Smiley.).

transform()

Auch bei einer Standalone-Nutzung von Compass funktioniert das transform-Mixin. Hier muss allerdings das Komma im transform-origin-Mixin gesetzt werden. Mit anderen Worten: Es funktioniert tatsächlich genau so wie in der Dokumentation angegeben.

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);

Ist doch alles ganz einfach, oder?

tl;dr

Mit Grunt

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100% 0%);

Standalone Compass

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);

Versionshinweis

Gestestet wurde mit Sass 3.3.5 und Compass 1.0.0.alpha.19.

Sass-/ Compass-Encoding auf UTF-8 umstellen

Beim erstmaligen compass compile eines neuen Projekt wurde mir heute die folgende Fehlermeldung ausgegeben:

Invalid US-ASCII character "\xC3"

Sass und Compass bekommen ihre Encoding-Optionen von Ruby, dass sie wiederum vom Environment (sprich: Dem Server, auf dem es läuft) übernimmt.

Um dieses Problem zu beheben, können zum einen die Locales (Spracheinstellungen) des Systems angepasst werden oder aber „nur“ das Encoding von Sass/ Compass auf UTF-8 umgestellt werden.

Locales umstellen

Achtung: Ich habe, was Server-Geschchichten angeht, maximal Achtelwissen und frage lieber sachkundige Mitmenschen. Daher verweise ich gern auf den Wiki-Artikel Locales unter Ubuntu konfigurieren.
In meinem konkreten Fall bekam ich (wie immer) schnell und kompetent Support von meinem Hoster Uberspace, der mit freundlicherweise die benötige Zeile Code gleich per Mail schickte:

export LC_CTYPE="en_US.UTF-8"

Hat bei mir funktioniert:

[user@server ~]$ locale
LANG=
LC_CTYPE=en_US.UTF-8

Encoding von Sass/ Compass ändern

Um das Encoding von Sass/ Compass zu ändern, muss in der config.rb-Datei folgende Zeile Code eingefügt werden:

Encoding.default_external = 'utf-8'

Quellen

Encoding error on compass font-face mixin

Compass und das WordPress-eigene style.css

In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis‘ ein Stylesheet namens style.css liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner css/ lagere, also auch das normale style.css. Meine bisherige Lösung sah so aus, dass ich im Theme-Root ein Stylesheet hatte dass das von Compass kompilierte Css importiert. Wirklich schön war das allerdings nicht, da so für die Einbindung zwei Requests von Nöten waren.

Umso erfreuter war ich, als ich bei Chris Coyier ein äußerst hilfreiches Snippet fand.

require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end

Das Snippet sucht nach dem Kompilieren die Datei style.css und schiebt sie innerhalb der Verzeichnisstruktur eine Ebene höher, in meinem Fall also ins Root-Verzeichnis des Themes.

Links

Compass Compiling and WordPress Themes