Główna » Kodowanie » Rozpoczęcie pracy z instalacją Sass i podstawami

    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.