CompassFrameworksFront EndSassStyle sheetsZaawansowane

#1 Poznaj super moc SASS + Compass – instalacja

Zaawansowane

Sass jest preprocesorem CSS rozszerzający jego możliwości o typowe dla języków programowania funkcje podobnie jak LESS.
W tym poradniku natomiast skupimy się głównie na  SASS ze względu na jego większe możliwości oraz sporą ilość frameworków (np. Compass, który również omówię).

SASS w naturalnym środowisku występuje w postaci dwóch rozszerzeń : …

SASS oraz SCSS, gdzie to ostatnie jest bardziej zbliżone dla samego CSS’a ze względu na składnię składającą się z klamer dlatego właśnie nim będziemy się posługiwali. SASS natomiast (bez klamer) to typowy zapis dla Ruby 🙂

Poniżej przykład SCSS:

See the Pen SSASS by bdesign (@Binek) on CodePen.0

 

OK DO DZIEŁA !  🙂 

1. Instalacja Ruby

Można co prawda używać programów do kompilacji SASS na CSS (jak wiadomo sass nie jest rozumiany przez przeglądarkę dlatego musi być przepisany na CSS). przykładem może być koala.
My natomiast jako programiści “pełną gębą” nie będziemy bawić się w interfejs tylko będziemy pisać w konsoli (co jak się przekonacie jest bardzo proste) 🙂
Na początku ściągamy sobie ruby.
Przy instalacji zaznaczamy:

Przechwytywanie

 

Następnie po zainstalowaniu Ruby wyszukujemy Start Command Prompt with Ruby i uruchamiamy:

Przechwytywanie2

 

2. Instalacja SASS

Jest również prosta, wpisujemy, lub kopiujemy w otwartym Start Command Prompt with Ruby linijkę:

klikamy enter…. sass się instaluje…. 🙂

 

3. Instalacja Compass

Tak jak już wspomniałem Compass jest frameworkiem SASS. Instalujemy go w podobny sposób co SASS:

 

4. Komendy – podstawowe Compass

5. Komendy- podstawowe SASS

Więcej o SASS.

 

Kiklka porad dotyczących bach’a:
– żeby zmienić dysk wpisujemy wybraną literę dysku np:

Przechwytywanie3

Zmiana ścieżki oraz finalne tworzenie paczki compass:

Przechwytywanie4