Podstawy Sass

To, co powinieneś wiedzieć

Przed kontynuowaniem, powinieneś mieć podstawową wiedzę na temat:

  • HTML
  • CSS

Jeśli chcesz nauczyć się tych przedmiotów wcześniej, odwiedź nasze Strona główna Odwiedź te tutorialy.

Co to jest Sass?

  • Sass oznacza Syntactically Awesome Stylesheet (gramatycznie super stylowy arkusz)
  • Sass jest rozszerzeniem CSS
  • Sass jest preprocesorem CSS
  • Sass jest zgodny z wszystkimi wersjami CSS
  • Sass zmniejsza powtarzalność CSS, oszczędzając czas
  • Sass został zaprojektowany przez Hampton Catlin i został opracowany przez Natalie Weizenbaum w 2006 roku
  • Sass można pobrać i używać za darmo

Dlaczego warto używać Sass?

Stylowe arkusze stają się coraz większe, bardziej złożone i trudniejsze do utrzymania. Oto, gdzie preprocesory CSS mogą pomóc.

Sass pozwala na użycie cech CSS, które nie istnieją w CSS, takich jak zmienne, reguły wcięć, mixin, import, dziedziczenie, wbudowane funkcje i inne funkcje.

Prosty przykład Sass, który jest bardzo pomocny

Załóżmy, że mamy stronę internetową z trzema głównymi kolorami:

#a2b9bc
#b2ad7f
#878f99

Ile razy musisz wpisać te wartości HEX? Wiele razy. Co jeśli zmienia się ten sam kolor?

Możesz napisać poniższy kod Sass, zamiast wielokrotnie wpisywać powyższe wartości:

Przykład Sass

/* Definiowanie zmiennych dla oryginalnych kolorów */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Używaj zmiennych */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Więc, podczas korzystania z Sass, jeśli zmienia się oryginalny kolor, wystarczy zmienić go w jednym miejscu.

Jak działa Sass?

Przeglądarka nie rozumie kodu Sass. Dlatego potrzebujesz procesora Sass, aby przekształcić kod Sass na standardowy CSS.

Ten proces nazywa się transpilacją (transpiling). Dlatego potrzebujesz dostarczyć kod Sass do transpilatora (rodzaju programu) i uzyskać kod CSS.

Wskazówka:Transpilacja to termin używany do przekształcania/translationu kodu źródłowego napisanego w jednym języku na inny język.

Typ pliku Sass

Rozszerzenie plików Sass to ".scss".

Komentarze Sass

Sass obsługuje standardowe komentarze CSS /* komentarz */a także wsparcie dla wewnętrznych komentarzy // komentarz:

Przykład Sass

/* Definiowanie głównych kolorów */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Używaj zmiennych */
.main-header {
  background-color: $primary_1; // Możesz dodać tutaj wewnętrzny komentarz
}