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.