Posted on

Compass i Sass w wersji 3.3.x

ABA-hero-10

Sass logoZ nową aktualizacją Sass’a dostaliśmy nowy typ danych: mapy. Przypominają wyglądem i działaniem tablice, znane z innych języków. Dla konkretnych kluczy w mapie możemy przypisać konkretne wartości. Wygląda to w ten sposób:

$map: (key1: value1, key2: value2, key3: value3);

Jest to wielkie udogodnienie, możemy w prosty sposób stworzyć np. grupy wartości kolorów dla konkretnego schematu kolorów. Przykład ze strony sass-lang.com:

$themes: (
mist: (
header: #DCFAC0,
text: #00968B,
border: #85C79C
),
spring: (
header: #F4FAC7,
text: #C2454E,
border: #FFB158
),
// ...
);
@mixin themed-header($theme-name) {
h1 {
color: map-get(map-get($themes, $theme-name), header);
}
}

Niestety oficjalna wersja Compass’a nie wspiera najnowszych aktualizacji Sass’a. Musimy trochę pokombinować aby używać nowych map w naszych compassowych projektach. Konkretnie to trzeba zainstalować wersję alpha Compass’a. W chwili pisania tego wpisu najnowsza preview release to wersja 1.0.0.alpha.13. Wersje preview instalujemy poleceniem:

gem install compass --pre

Po próbie uruchomienia polecenia:

compass watch

Dostajemy  zazwyczaj cały ekran błędów z tym, że w przyszłej wersji Sass’a zamiast wartości !default trzeba będzie używać !global oraz że nie będziemy mogli stosować wartości false w zmiennych tylko null. Chwilowo to ignorujemy.

Jednak ostatni błąd uniemożliwia nam skompilowanie pliku .scss:

LoadError on line ["36"] of C: cannot load such file -- wdm

Musimy zainstalować wdm (Windows Directory Monitor) poleceniem gem install wdm.Gdyby tego było mało do jego zainstalowania potrzebujemy DevKit od Ruby. Instalacja DevKit’a na szczęście nie jest skomplikowana, sprowadza się do pobrania paczki, rozpakowania i uruchomienia w rozpakowanym folderze dwóch poleceń ruby dk.rb init oraz ruby dk.rb install.

Dla ułatwienia wszystkich operacji polecam zainstalowanie Ruby z paczki Railsinstaller, która zawiera już w sobie domyślnie DevKit’a, Git’a i inne fajowskie rzeczy.

Gdy mamy DevKit’a, zainstalowaliśmy później wdm, możemy odpalić compass’a poleceniem, które zostało wymienione wyżej.

Dodatkowo aby wyłączyć informację o tym, co nie będzie niedługo działało możemy dodać do naszego pliku config.rb polecenie:

disable_warnings = true

Ostrzeżenie podczas kompilacji plików scss w compass w Sass 3.3
Ostrzeżenie podczas kompilacji plików scss w compass w Sass 3.3

Oczywiście musimy to traktować jako tymczasowe środowisko testowe i jak tylko wyjdzie wersja programu Compass wspierająca nowego Sass to jak najszybciej ją instalować i nie wyłączać ostrzeżeń z programu.

 

Źródło: sass-lang.com
Obrazek: wikimedia.org
P.S. Zauważyłem również wzrost szybkości kompilowania plików .css z .scss