sass Samouczek
Pierwsze kroki z sass

Uwagi

Wersje

Ustawiać

Jeśli chodzi o korzystanie z SASS, istnieje wiele sposobów konfigurowania przestrzeni roboczej. Niektóre osoby wolą korzystać z narzędzi wiersza poleceń (prawdopodobnie Linux), a inne wolą korzystać z aplikacji GUI. Obejmę oba.

Narzędzia wiersza poleceń

Strona „Zainstaluj SASS” na sass-lang.com dość dobrze to opisuje. Możesz używać SASS z Ruby (który można zainstalować z menedżera pakietów Linux lub pobrać instalator na Windows). macOS jest fabrycznie wyposażony w Ruby.

Po zainstalowaniu Ruby musisz zainstalować SASS (w niektórych przypadkach sudo może nie być potrzebne):

sudo gem install sass

Na koniec możesz sprawdzić, czy zainstalowałeś SASS za pomocą sass -v .

Aplikacje GUI

Chociaż istnieje wiele aplikacji GUI, z których można korzystać, polecam Scout-App . Automatycznie buduje i kompresuje pliki CSS za Ciebie podczas zapisywania plików i obsługuje systemy macOS, Windows i Linux.

Zmienne

Jeśli masz często używaną wartość, możesz zapisać ją w zmiennej. Można to wykorzystać na przykład do zdefiniowania schematów kolorów. Będziesz musiał zdefiniować swój schemat tylko raz, a następnie będziesz mógł go używać w swoich arkuszach stylów.

Aby zdefiniować zmienną, musisz poprzedzić jej nazwę symbolem $. (Tak jak w PHP.)

Możesz przechowywać dowolną prawidłową wartość właściwości CSS w zmiennej. Takie jak kolory, czcionki lub adresy URL.

Przykład 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Importowanie

Załóżmy następujący scenariusz: Masz dwa arkusze stylów: _variables.scss i layout.scss . Logicznie, wszystkie zmienne są przechowywane w arkuszu stylów zmiennych, ale chcesz uzyskać do nich dostęp z arkusza stylów układu.

UWAGA: Możesz zauważyć, że arkusz stylów zmiennych ma podkreślenie („_”) przed jego nazwą. Jest tak, ponieważ jest częściowy - co oznacza, że zostanie zaimportowany.

sass-lang.com mówi o podszablonów co następuje: Można tworzyć częściowych plików Sass, które zawierają niewiele fragmentów CSS, które można zawrzeć w innych plikach Sass. Jest to świetny sposób na modularyzację CSS i pomaga utrzymać rzeczy łatwiejsze w utrzymaniu. [...] Podkreślenie informuje Sassa, że plik jest tylko plikiem częściowym i że nie powinien być generowany w pliku CSS. Części Sass są używane w dyrektywie @import.

Zmienne SCSS świetnie nadają się do tego scenariusza. Załóżmy, że twój _variables.scss wygląda następująco:

$primary-color: #333;

Możesz go zaimportować za pomocą @import a następnie nazwy arkusza stylów w cudzysłowach. Twój arkusz stylów układu może teraz wyglądać tak (pamiętaj, że podczas importu nie ma podkreślenia ani rozszerzenia pliku):

@import 'variables';
body {
  color: $primary-color;
}

Spowoduje to wygenerowanie czegoś takiego:

body {
  color: #333;
}

Zagnieżdżanie

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

wynik

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Komentarze

SASS obsługuje dwa rodzaje komentarzy:

• Komentarze śródliniowe - obejmują one tylko jedną linię i zwykle służą do opisu zmiennej lub bloku. Składnia jest następująca: // Your comment here (poprzedzasz go podwójnym ukośnikiem ( // ), a reszta linii jest ignorowana przez analizator składni.

• Komentarze wielowierszowe - obejmują wiele wierszy i zwykle służą do wyświetlania praw autorskich lub licencji na górze dokumentu. Możesz otworzyć blok komentarza wielowierszowego za pomocą /* i możesz zamknąć blok komentarza wielowierszowego za pomocą */ . Oto przykład:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/