Jak zainstalować SASS:

SASS lub Syntactically Awesome Stylesheets to rozszerzenie CSS i pomaga nam pisać bardziej elastyczne style. To dodaje więcej mocy do podstawowego języka CSS. SASS to język przetwarzania wstępnego, który jest skompilowany w CSS i ma różne techniczne składnie. Pisanie kodu w SASS nie pozwala przeglądarkom interpretować kodu w taki sposób, że nie jest to właściwy CSS, zamiast tego potrzebujemy kompilatora do uzupełnienia kodu, który piszemy w CSS, aby przeglądarki mogły go zinterpretować i zrozumieć. Zmienne, mixiny, reguły zagnieżdżone, importowanie w tekście itp. Mogą być używane w SASS ze zgodną składnią CSS. Za pomocą biblioteki stylów kompasu Syntactically Awesome Stylesheets utrzymuje dobrze zorganizowane duże arkusze stylów i pozwala uruchomić małe arkusze stylów w bardzo krótkim czasie. Oprócz funkcji, takich jak platforma w pełni kompatybilna z CSS, i rozszerzeń języka, takich jak zagnieżdżanie, miksy, WTC oferuje również funkcje, takie jak wiele ważnych funkcji do manipulowania kolorami i innymi innymi wartościami. Posiada również inne zaawansowane funkcje, takie jak dyrektywy kontrolne dla bibliotek, odpowiednio sformatowane, konfigurowalne dane wyjściowe i wiele innych.

Poniżej znajdują się wymagania systemowe dotyczące instalacji Syntactically Awes Stylesheets:

  • System operacyjny - może to być dowolny wieloplatformowy system operacyjny.
  • Język programowania - Językiem programowania jest Ruby.
  • Przeglądarka - może to być dowolna przeglądarka, np. Google Chrome, Internet Explorer, Safari, Mozilla Firefox, opera itp.

Kroki, aby zainstalować SASS:

Poniżej znajdują się kroki instalacji pakietu Syntactically Awesome Stylesheets w systemie:

Krok 1:

Pobierz aktualną stabilną wersję Ruby, korzystając z poniższego linku. Pobiera plik zip, który należy rozpakować do dalszej instalacji. Do rozpakowania pliku można użyć Winzip lub 7zip.

https://www.ruby-lang.org/en/downloads/

Krok 2:

Po rozpakowaniu zainstaluj Ruby w systemie zgodnie ze standardową procedurą instalacji.

Krok 3:

Dodaj folder Ruby bin do zmiennej użytkownika PATH i zmiennej systemowej, aby działała z poleceniem gem.
Aby dodać zmienne PATH:

  1. Najpierw kliknij prawym przyciskiem myszy ikonę mojego komputera na pulpicie.
  2. Przejdź do właściwości z menu rozwijanego.
  3. Następnie kliknij kartę zaawansowaną, a następnie kliknij zmienne środowiskowe.
  • Po otwarciu okna zmiennych środowiskowych kliknij dwukrotnie PATH w kolumnie zmiennych u góry. Poniżej pokazano zrzut ekranu:

  • Po dwukrotnym kliknięciu PATH otworzy się okno edycji zmiennej użytkownika. Dodaj ścieżkę ruby ​​bin w polu wartości zmiennej jako C: \ Ruby \ bin. W przypadku, gdy dla innych plików ustawiono inne ścieżki, wystarczy wstawić średnik i dodać ścieżkę ruby. Poniżej pokazano zrzut ekranu:

  • Kliknij przycisk OK, aby zakończyć zadanie.

Ustawianie zmiennej systemowej:

  • W systemie zakładka zmiennej klika nowy przycisk.
  • Następnie otworzy się nowe okno zmiennych systemowych. Wypełnij RubyOpt w polu nazwy zmiennej i RubyGems w polu wartości zmiennej. Następnie kliknij przycisk OK, aby zakończyć zadanie. Poniżej pokazano zrzut ekranu:

Krok 4:

W wierszu polecenia systemu uruchom polecenie gem gem Scss. Spowoduje to zainstalowanie sass w systemie.

Krok 5:

SASS po pomyślnym zainstalowaniu wyświetli poniższy ekran. Sprawdź, aby uzyskać potwierdzenie.

Poniżej znajduje się przykład pokazujący podstawową implementację SASS.


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day


SASS example

Example
It is a bright and sunny day

Będziemy tworzyć dobre przykłady.css, które są podobne do CSS, oczekują, że zostaną zapisane z rozszerzeniem .scss. To musi zostać utworzone w folderze ruby ​​wraz z plikami .htm. Opcjonalnie plik scss można również zapisać ze ścieżką folderu ruby ​​\ lib \ scss. Utwórz folder sass w folderze lib przed utworzeniem pliku scss.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

SASS może zostać skierowany na oglądanie pliku i aktualizację CSS za każdym razem, gdy nastąpi jakakolwiek zmiana w pliku SCSS. Poniżej znajduje się polecenie:

sass --watch C:\ruby\lib\sass\ example.scss: example.css

Po uruchomieniu powyższego polecenia automatycznie utworzy plik example.css. Po zmianie pliku scss plik example.css zostanie zaktualizowany automatycznie.

Po uruchomieniu powyższego polecenia zostanie utworzony plik example.css z następującą zawartością.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

Inne niż powyższe kroki poniżej to inne sposoby instalacji SASS:

Istnieje wiele aplikacji, które oferują łatwe i przyjazne dla użytkownika sposoby instalacji SASS. Można je pobrać z Internetu. Niektóre z nich są bezpłatne, a inne są płatne.

NPM może być również użyty do zainstalowania SASS w przypadku, gdy użytkownik używa node.js.

Dlatego w powyższym przewodniku krok po kroku można pomyślnie zainstalować SASS w systemie. Poniżej znajduje się polecenie:

npm install -g sass

Należy jednak pamiętać, że ta instalacja zainstaluje czystą implementację javascript w Syntactically Awesome Stylesheets, która jest stosunkowo wolniejsza niż inne podane tu metody, ale nadal ma ten sam interfejs innych metod. Tak więc, w przypadku spowolnienia powoduje jakiekolwiek problemy, jeśli będzie bardzo łatwo przełączyć się na inną implementację w późniejszym czasie w celu zwiększenia prędkości.

W przypadku, gdy dowolny użytkownik uruchomi menedżera pakietów Chocolatey dla systemu Windows, można zainstalować rzutkę SASS. Poniżej znajduje się polecenie:

choco install sass

W przypadku dowolnego użytkownika korzystającego z menedżera pakietów Homebrew dla systemu Mac OS X można zainstalować rzutnik SASS. Poniżej znajduje się polecenie:

brew install sass/sass/sass

Tak więc, wraz z tak wieloma funkcjami, SASS lub Syntactically Awesome Stylesheets oferuje szeroki zakres funkcji używanych do łatwiejszego projektowania stron internetowych. SASS zapewnia różne rozszerzenia CSS, takie jak właściwości zagnieżdżone, wybory symboli zastępczych itp. Obsługuje również skrypty SASS oferujące interaktywną powłokę do programowania wraz z obsługą różnych zmiennych, typów danych, operacji, funkcji, interpolacji itp. Proces instalacji jest również bardzo łatwy wykonać. Dodając wszystkie swoje funkcje, SASS zapewnia wyjątkowo dobrą platformę do pracy z projektowaniem stron internetowych i innymi.

Polecane artykuły

To był przewodnik po instalacji SASS. Tutaj omówiliśmy proces krok po kroku, aby zainstalować SASS. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -

  1. Kompletny przewodnik po instalacji .NET
  2. Jak zainstalować PostgreSQL?
  3. Różne kroki instalacji maszynopisu
  4. Jak zainstalować Appium

Kategoria:

Rozwój oprogramowania