Rozpoczęcie pracy z instalacją Sass i podstawami

W tym poście omówimy preprocesor CSS o nazwie Sass lub Syntaktycznie niesamowite arkusze stylów.

Jeśli śledziłeś nasze poprzednie posty na LESS, jesteśmy pewni, że znasz Preprocesor CSS. Zarówno Sass, jak i LESS są preprocesorami CSS, które przede wszystkim rozszerzają sposób komponowania zwykłego statycznego CSS w bardziej dynamiczny sposób, używając języków programowania, takich jak zmienne, miksy i funkcje.

Instalowanie Sassa

Zanim będziemy mogli skomponować Sassa, musimy go zainstalować. Sass jest zbudowany na Ruby. Jeśli pracujesz na komputerze Mac, prawdopodobnie masz już zainstalowany Ruby. Jeśli możesz zainstalować Ruby w Windows, użyj tego instalatora Ruby.

Po zakończeniu instalacji możesz przejść do Terminalu (na komputerze Mac) lub w wierszu polecenia (w systemie Windows), a następnie wpisać w nim następujący wiersz polecenia:

Na komputerze Mac;

 sudo gem zainstaluj sass 

W systemie Windows;

 klejnot zainstalować sass 

Jeśli instalacja się powiedzie, w terminalu / wierszu polecenia pojawi się następujące powiadomienie.

Następnie musimy wybrać, który katalog Sass ma oglądać za pomocą następującego polecenia;

 sass --watch ścieżka / katalog sass 

Powyższa linia poleceń będzie oglądać co .scss/.sass pliki w ścieżka / katalog a gdy jeden z plików w tym katalogu zostanie zmieniony, Sass zaktualizuje odpowiednie pliki lub utworzy je, jeśli nie istnieje.

Jeśli potrzebujemy Sassa do wygenerowania plików w określonym katalogu, możemy to zrobić w ten sposób;

 sass --watch ścieżka / katalog-sass: ścieżka / css-katalog 

Za pomocą tego wiersza poleceń możemy również oglądać konkretny plik, a nie katalog;

 sass --watch ścieżka / katalog-sass / styles.css 

Jeśli polecenie zegarka powiedzie się, w terminalu / wierszu polecenia pojawi się coś takiego, jak poniższe powiadomienie.

Dalsze czytanie: Automatyczne kompilowanie plików Sass za pomocą Sass 3

Aplikacje Sass

Jeśli jednak nienawidzisz pracy za pośrednictwem Terminalu lub wiersza poleceń, możesz użyć niektórych aplikacji dla Sassa. Bezpłatną opcją jest Scout; jest zbudowany na Adobe Air, więc można go uruchomić na wszystkich systemach operacyjnych (Windows, OSX i Linux).

Jednak działa bardzo wolno, jak niektórzy wcześniej informowali.

Więc jeśli nie masz cierpliwości, są też płatne opcje. Cena różni się w zależności od aplikacji, Compass.app kosztuje 10 USD, Fire.app, 14 USD i Codekit za 25 USD.

Podświetlanie kodu

Chociaż Sass jest przede wszystkim rozszerzeniem CSS, Twój aktualny edytor może nie podświetlać poprawnie składni. Na szczęście istnieją już pakiety, które można włączyć w prawie każdym edytorze kodu .sass lub .scss podświetlanie kodu.

Jeśli pracujesz z Sublime Text 2 tak jak ja, możesz użyć tych pakietów; Sublime Text HAML & Sass i Sublime Text 2 Sass Package, a dla łatwiejszego sposobu, możesz zainstalować jeden z tych pakietów poprzez Pakiet kontroli.

Dla innych edytorów kodu zobacz poniżej lub spróbuj google.

• Ten jest świetnym samouczkiem screencastu na temat pracy z Sass z Dreamweaver
• Tryb Sass dla Kody. Ale wydaje się, że ten tryb został zintegrowany z Codą od wersji 2
• Pakiet TextMate Official SCSS
• Espresso Sugar dla Sass
• Pakiety InType

Język Sass

Sass i LESS faktycznie współdzielą niektóre popularne języki, poniżej kilka z nich.

Zmienne

 $ color-base: # 000; $ width: 100px; 

Jedyną różnicą od zmiennych MNIEJSZYCH jest to, że zmienna w Sassie jest zdefiniowana za pomocą a $ znak.

Reguły zagnieżdżania

 header width: 980px; wysokość: 80px; nav ul list-style: none; wyściółka: brak; margines: brak;  li display: inline; a dekoracja tekstowa: brak;  

Mieszanki i funkcje

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; border-radius: $ radius;  

Operacje

 li szerokość: $ szerokość / 5 - 10px;  

Instrukcja warunkowa

 @if lightness ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;  

W LESS możesz zrobić podobne rzeczy za pomocą wyrażenia Guard, które omówiliśmy w tym samouczku.

Końcowa myśl

I to wszystko. W następnym poście zaczniemy poznawać języki Sass i jego towarzysz, Compass. Bądźcie czujni.