KURS ONLINE SASS: Instalacja i integracja z Netbeansem - część 2 z cholera wie ilu

Czerwiec 10 2019
Darmowy kurs online SASS

Dobra, koniec teoretyzowania czas instalowania SASS. Co musimy zrobić?


Wprowadzenie do kursu znajdziecie tutaj: 

https://geekfactory.pl/strona/wpis/kurs_online_sass_wprowadzenie_do_preprocesorow_css_czesc_pierwsza

 

 

Nasampierw musimy zainstalować Ruby na naszym komputerze. Instalka jest w formie exe więc wystarczy pobrać plik z https://rubyinstaller.org/ i kliknąć w niego dwa razy. Jedyne o czym należy pamiętać to zaznaczenie opcji Add Ruby executables to your PATH”. Na końcu wyskoczy opcja do instalowania baz ale to nam niepotrzebne więc zamykamy konsolę.

 

Po zainstalowaniu otwieramy zwykłą konsolę windowsa - lupka w dolnym, lewym, rogu -> wpisujemy w pole wyszukiwania CMD. W otwartej karcie konsoli wpisujemy “gem install sass”. Zezwalamy na dostęp jeśli mamy zaporę windowsa włączoną i czekamy aż instalacja dobiegnie końca. (foto1)

 

I tyle jeżeli chodzi o instalację na naszym komputerze. Mamy do dyspozycji oczywiście takie rozwiązania jak Koala - http://koala-app.com/ - osobny programik do preprocesorów - działa fajnie. Jednak ja wolałem zintegrować je bezpośrednio z moim środowiskiem pracy. Na co dzień używam edytora NetBeans w wersji 8.2 (pre-apache) którego serdecznie polecam. Instalka do pobrania tutaj - https://netbeans.org/downloads/8.2/

 

Ostatnim krokiem będzie spięcie tego wszystkiego razem. Tworzę więc na pulpicie nowy folder - gfsass, a w nim klasyczny plik index.html oraz dwa foldery - css i scss. Do indexu podpinam plik css/main.css pomimo tego że fizycznie on jeszcze nie istnieje. (foto2 i 3)

 

Potem uruchamiam NetBeansa dodaje nowy projekt z istniejącym źródłem którym jest nasz folder gfsass (foto 4,5,6)

 

Klikamy prawym przyciskiem myszy na folder scss i tworzymy w nim nowy plik main.scss (z opcji wybieramy New->Other->HTML5/JavaScript->Sass File). W drugiej karcie upewniamy się że jest zaznaczona opcja Compile Sass Files on save,  a potem klikamy Configure Executables…


W nowo otwartym oknie, w polu SASS Path powinniśmy mieć domyślną ścieżkę gdzie zainstalował się SASS lub puste pole (nie wiem od czego to zależy ale czasami mi nie łapało). Tak czy siak domyślna ścieżka instalacji Ruby to   C:\Ruby25-x64\bin\sass


Wszystko fajnie, tylko łapie nam nie ten plik sass w związku z czym klikamy Browse… i musimy wybrać plik sass.bat (domyślnie łapie plik bez rozszerzenia. Klikamy Open a potem Apply i Ok  - powinniśmy wrócić do okna tworzenia pliku gdzie wystarczy kliknąć finish. (foto 8)

Otwiera nam się nowy plik main.scss w którym wklepujemy następującą zawartość:

$bgcolor:#FA0;

body{

   background: $bgcolor;

}

Po zapisaniu sprawdźmy katalog css - powinien się tam utworzyć plik main.css oraz plik mapy. Dla stuprocentowej pewności że wszystko działa odpalamy nasz index w przeglądarce i powinniśmy mieć domyślnie inne tło strony. I to by było na tyle. Od dziś nie dotykamy plików w folderze css tylko edytujemy to co jest w scss, a NetBeans automatycznie nam to przerabia na CSSa podczas zapisu - wygodne prawda?

Dalsza część już niedługo :D

Gdyby ktoś się zgubił dodaje w galerii zrzuty.

Autor: Geek Factory
Powrót
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.