Scout — narzędzie ułatwiające pracę z Sass i Compass w systemach Windows i Mac

06 maja 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

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.

  1. Pobierz Scout z serwisu GitHub.
  2. 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:
    Pierwsze okno instalatora Scout

    Pierwsze okno instalatora Scout

  3. W drugim oknie kreatora należy zaakceptować postanowienia licencji.
    Drugie okno instalatora Scout

    Drugie okno instalatora Scout

  4. Po zakończeniu instalacji zostanie wyświetlone okno programu, które jest wyjątkowo ascetyczne.
    Okno główne Scout

    Okno główne Scout

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. Jeśli wybrany zostałby folder o nazwie Witajcie, okno programu wyglądałoby tak, jak na poniższym zrzucie:

Okno główne Scout po utworzeniu pierwszego projektu

Okno główne Scout po utworzeniu pierwszego projektu

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).

Okno Scout z podanymi ścieżkami do plików

Okno Scout z podanymi ścieżkami do plików

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;
}

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *