Sass i Compass to klejnoty Ruby, przez co aby z nich korzystać, trzeba znać język Ruby i sprawnie się nim posługiwać z poziomu wiersza poleceń. Ponieważ nie wszyscy webmasterzy i projektanci stron internetowych posiadają te umiejętności, ktoś wpadł na doskonały pomysł, aby napisać program Scout, dzięki któremu nie trzeba instalować środowiska Ruby, aby korzystać z technologii Sass i Compass.
Mówiąc najprościej Scout zawiera samodzielne środowisko wykonawcze, w którym działają Sass i Compass, dzięki czemu projektami w tych językach można zarządzać w bardzo łatwy sposób za pomocą kliknięć myszką. Nie trzeba znać języka Ruby ani związanych z nim technik programowania.
Scout jest dostępny zarówno dla systemu Windows jak i Mac.
Czym w ogóle jest Sass
Sass to rozszerzenie Kaskadowych arkuszy stylów (CSS) umożliwiające zagnieżdżanie reguł, stosowanie domieszek i zmiennych oraz korzystanie z wielu innych udogodnień, których brak w standardowym CSS.
Czym jest Compass
Compass to otwarty szkielet CSS ułatwiający korzystanie z CSS3 i popularnych wzorców projektowych. Compass działa tylko w połączeniu z Sass.
Instalacja i konfiguracja Scout
Instalacja Scouta jest prosta i przebiega identycznie, jak instalacja każdej innej aplikacji. Poniżej znajduje się zwięzły przewodnik po instalacji narzędzia w systemie Windows.
- Pobierz Scout z serwisu GitHub.
- Uruchom instalator i postępuj zgodnie z instrukcjami kreatora instalacji. W pierwszym oknie kreatora można zdefiniować kilka podstawowych ustawień, jak ikona na pulpicie czy folder instalacji.
- W drugim oknie kreatora należy zaakceptować postanowienia licencji.
- Po zakończeniu instalacji zostanie wyświetlone okno programu, które jest wyjątkowo ascetyczne.
Tworzenie projektu Scout
Aby utworzyć projekt, należy kliknąć znajdujący się w lewym dolnym rogu okna aplikacji przycisk +. Spowoduje to otwarcie standardowego okna wyboru folderu. Wybierz katalog na pliki projektu i kliknij przycisk Wybierz folder.
Teraz wystarczy tylko w polach tekstowych wpisać ścieżki do różnych zasobów i można rozpocząć pracę. Wymagane są tylko dwa pierwsze pola: Input folder (folder z danymi wejściowymi — pliki Sass) i Output folder (folder z danymi wyjściowymi – CSS).
Aby zamienić kod Sass na CSS, należy podać ścieżkę do folderu z plikami Sass i do folderu, w którym ma zostać zapisany otrzymany plik CSS (zgodnie z opisem powyżej).
W tym przykładzie plik Sass został umieszczony w folderze o nazwie sass, a pliku CSS spodziewamy się w folderze css.
Uruchamianie projektu
Pierwszym krokiem przed uruchomieniem projektu jest oczywiście umieszczeniu pliku z kodem Sass w folderze wejściowym. Na próbę wykorzystamy przykład z oficjalnej witryny języka:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Skopiuj ten kod i wklej go do pliku o dowolnej nazwie, ale z rozszerzeniem .scss. Plik ten umieść w folderze sass. Następnie kliknij ikonę strzałki znajdującą się w oknie Scout obok nazwy projektu (po lewej stronie na rysunku w poprzedniej sekcji).
Program przekształci kod Sass na CSS i zwróci wynik w pliku o nazwie style.css w folderze css. Dla powyższego kodu otrzymamy poniższy arkusz stylów:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}