Zmienne w Sass
Zmienne w Sass niczym nie różnią się od zmiennych w zwykłych językach programowania. Można ich używać jako prostych stałych do reprezentowania kolorów, rozmiarów itp. Ponadto można używać ich w wyrażeniach z operatorami matematycznymi.
W poniższym kodzie Sass znajdują się definicje trzech zmiennych: baseFontSize
o wartości 16
, bgColor
o wartości #FFF
oraz defaultTextColor
o wartości określającej kolor w formacie RGB.
$baseFontSize: 16px; $bgColor: #FFF; $defaultTextColour: rgb(255,25,233);
Zdefiniowanych zmiennych można używać w regułach CSS.
Możemy np. utworzyć regułę definiującą właściwości tekstu w elemencie body i regułę powodującą trzykrotne powiększenie tekstu w nagłówkach h1
w stosunku do rozmiaru tekstu w elemencie body
:
body { font-size: $baseFontSize; } h1 { font-size: $baseFontSize * 3; }
Z tego zostanie wygenerowany następujący kod CSS:
body { font-size: 16px; } h1 { font-size: 48px; }
Zwróć uwagę, że jednostka px
została automatycznie dodana do wartości obliczonej dla h1
.
Gdybyśmy chcieli podzielić kontener na dwie części o szerokości wyrażonej w pikselach, moglibyśmy zdefiniować zmienną reprezentującą szerokość pierwszej z nich, a następnie za pomocą Sass obliczyć szerokość drugiej:
$containerWidth: 1000px; $firstColumnWidth: 300px; $secondColumnWidth: $containerWidth - $firstColumnWidth; #container { width: $containerWidth; } #columnOne { width: $firstColumnWidth; } #columnTwo { width: $secondColumnWidth; }
Z tego zostanie wygenerowany następujący kod CSS:
#container { width: 1000px; } #columnOne { width: 300px; } #columnTwo { width: 700px; }
Domieszki Sass
Domieszki umożliwiają wstawianie zestawów własności CSS do reguł CSS. Zestawy te są mieszane z pozostałymi własnościami w regule.
Domieszkę (ang. mixin) definiuje się przy użyciu instrukcji @mixin
, po której należy wpisać nazwę definiowanej domieszki:
@mixin visually-hidden { visibility: hidden; display: none; } #validationErrorMessage { color: red; @include visually-hidden; }
Z tego zostanie wygenerowany następujący kod CSS:
#validationErrorMessage { color: red; visibility: hidden; display: none; }
Zwróć uwagę, że kod CSS domieszki został dołączony do reszty reguły (w tym przypadku do deklaracji color: red;
).
Można dodać dowolną liczbę domieszek:
@mixin big{ font-size: 1000px; } @mixin red{ color: red; } #bigAndRed { @include big; @include red; }
Z tego zostanie wygenerowany następujący kod CSS:
#bigAndRed { font-size: 1000px; color: red; }
Później pokażę Ci jeszcze domieszki z argumentami, które są jeszcze fajniejsze.
Zagnieżdżanie w Sass
Jest to jedna z tych funkcji Sass, które przy pierwszym zetknięciu wydają się skomplikowane.
Proste zagnieżdżanie
Zagnieżdżanie stosuje się m.in. po to, aby zredukować w kodzie ilość powtórzeń (i przyszłych zmian) reguł rozpoczynających się w ten sam sposób.
Przypuśćmy np. że nasza nawigacja zawiera element a
znajdujący się w elemencie ul
, który z kolei znajduje się w elemencie div
o nazwie mainNavMenu
. Do sformatowania takiej nawigacji moglibyśmy napisać następujący kod CSS:
#mainNavMenu { width: 100%; height: 50px; } #mainNavMenu ul { list-style-type: none; } #mainNavMenu li { float: left; } #mainNavMenu li a { font-size: 20px; }
Selektor #mainNavMenu
został napisany aż cztery razy. Może to nie tak dużo, ale jeśli zechcemy zmienić nazwę elementu, to czekają nas cztery zmiany. Jednak w tym kodzie można dostrzec zagnieżdżenie: wszystkie selektory są zagnieżdżone w #mainNavMenu
. W tej sytuacji możemy użyć zagnieżdżania Sass, aby zredukować narzut i uprościć deklarację:
#mainNavMenu { width: 100%; height: 50px; ul { list-style-type: none; } li { float: left; a { font-size: 20px; } } }
Teraz, gdy zmienimy nazwę elementu, będziemy musieli dokonać tylko jedną dodatkową zmianę, a kod CSS zostanie automatycznie zaktualizowany.
Oto arkusz stylów, jaki otrzymamy:
#mainNavMenu { width: 100%; height: 50px; } #mainNavMenu ul { list-style-type: none; } #mainNavMenu li { float: left; } #mainNavMenu li a { font-size: 20px; }
Zagnieżdżanie własności Sass
Można także zagnieżdżać własności. W Sass własności są rodzajem skrótów, dzięki którym nie trzeba przepisywać własności i ich przedrostków w rodzaju border-bottom-
.
Przypuśćmy na przykład, że chcemy mieć prostokątne pole o ciągłym obramowaniu oraz z niebieską ciągłą linią o długości 100 pikseli na górze i czerwoną ciągłą linią o długości 200 pikseli na dole. Korzystając z możliwości zagnieżdżania własności w Sass możemy napisać:
.awesomeBox { border: { style: solid; top: { width: 100px; color: blue; } bottom: { width: 200px; color: red; } } }
Z tego zostanie wygenerowany następujący kod CSS:
.awesomeBox { border-style: solid; border-top-width: 100px; border-top-color: blue; border-bottom-width: 200px; border-bottom-color: red; }
W przykładzie tym warto zauważyć, że kod Sass jest dłuższy niż wygenerowany kod CSS. Nie wiem, czy kod Sass jest też bardziej czytelny, ale w przypadku większej liczby zagnieżdżonych własności funkcja ta może być przydatna.
Sass dla zaawansowanych
W poprzednim podrozdziale opisałem podstawowe cechy języka Sass. W tej części natomiast znajdziesz wprowadzenie do bardziej zaawansowanych zagadnień.
Domieszki z parametrami
Domieszki pobierają listy parametrów oddzielanych przecinkami. Jeśli na przykład używasz niestandardowych fontów, które importujesz za pomocą reguły @font-face
, możesz napisać domieszkę z parametrami:
@mixin fontFace($fontFamily, $fontFileName, $fontWeight: normal, $fontStyle: normal ) { @font-face { font-family: $fontFamily; src: url('#{$fontFileName}-webfont.eot'); src: url('#{$fontFileName}-webfont.eot?#iefix') format('embedded-opentype'), url('#{$fontFileName}-webfont.woff') format('woff'), url('#{$fontFileName}-webfont.ttf') format('truetype'); font-weight: $fontWeight; font-style: $fontStyle; } }
W kodzie tym jest do wyjaśnienia kilka rzeczy. Po pierwsze zostały zdefiniowane dwa parametry obowiązkowe: $fontFamily
i $fontFileName
. Dodatkowo zdefiniowałem dwa parametry opcjonalne: $fontWeight
i $fontStyle
. Każdy z nich ma domyślną wartość normal
, która zostanie użyta, jeśli nie zostanie podana żadna inna wartość w wywołaniu domieszki.
W domieszce znajduje się reguła @font-face
definiująca rodzinę fontów i lista plików fontów w różnych formatach. Adres URL każdego z tych plików składa się z wartości parametru $fontFileName
i przyrostka określającego format.
Aby przy użyciu tej domieszki odwołać się do dwóch hipotetycznych fontów AwesomeFont1 i AwesomeFont2, zapisanych w katalogu myfonts, należałoby napisać:
@include fontFace("AwesomeFont1", "myfonts/AF1"); @include fontFace("AwesomeFont2", "myfonts/AF2", bold, italic);
Z tego zostanie wygenerowany następujący kod CSS:
@font-face { font-family: "AwesomeFont1"; src: url("myfonts/AF1-webfont.eot"); src: url("myfonts/AF1-webfont.eot?#iefix") format("embedded-opentype"), url("myfonts/AF1-webfont.woff") format("woff"), url("myfonts/AF1-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "AwesomeFont2"; src: url("myfonts/AF2-webfont.eot"); src: url("myfonts/AF2-webfont.eot?#iefix") format("embedded-opentype"), url("myfonts/AF2-webfont.woff") format("woff"), url("myfonts/AF2-webfont.ttf") format("truetype"); font-weight: bold; font-style: italic; }
Odwoływanie się do selektora z wnętrza reguły Sass
Jeśli korzystasz z możliwości zagnieżdżania reguł, to w zagnieżdżonej regule za pomocą znaku & możesz odwoływać się do selektora reguły nadrzędnej.
Poniżej znajduje się przykładowy kod dodający obsługę stanów :hover
i :visited
odnośników:
a { font-size: 100px; &:hover { font-size: 200px; } &:visited { text-decoration: underline; } }
Z tego zostanie wygenerowany następujący kod CSS:
a { font-size: 100px; } a:hover { font-size: 200px; } a:visited { text-decoration: underline; }
Znak & został zastąpiony selektorem reguły nadrzędnej, którym w tym przypadku jest a
.
Komentarze w Sass
Komentarze jednowierszowe umieszczone w plikach Sass (.scss) nie są przekazywane do wygenerowanych plików CSS:
// Ten komentarz nie pojawi się w wygenerowanym pliku CSS // Ten też nie
Jeśli chcesz, aby komentarz został przekazany do kodu CSS, użyj komentarza wielowierszowego:
/* Ten komentarz zostanie przekazany do pliku CSS */
Importowanie plików Sass (.scss)
Nie ma obowiązku umieszczać całego kodu Sass w jednym pliku. W razie potrzeby można importować kilka plików .scss do jednego głównego pliku.
Na przykład wszystkie zmienne można zapisać w pliku base.scss i dołączyć je do pliku main.scss za pomocą instrukcji @import "base.scss";
umieszczonej na początku tego pliku. Następnie do dokumentu HTML trzeba będzie dołączyć tylko plik main.css.
Pętle w Sass
Za pomocą iteracji i wykorzystując specjalny licznik iteracji można tworzyć wiele reguł CSS.
Na przykład, aby zdefiniować szerokości nagłówków w ten sposób, że każdy kolejny jest o 10 pikseli węższy od poprzedniego, można napisać następującą pętlę:
$sizeDifferenceBetweenHeadings: 10px; $biggestHeadingSize: 100px; $currentHeadingSize: $biggestHeadingSize; @for $i from 1 through 6 { h#{$i} { width: $currentHeadingSize } $currentHeadingSize: $currentHeadingSize - $sizeDifferenceBetweenHeadings; }
Z tego zostanie wygenerowany następujący kod CSS:
h1 { width: 100px; } h2 { width: 90px; } h3 { width: 80px; } h4 { width: 70px; } h5 { width: 60px; } h6 { width: 50px; }
Można także używać instrukcji @each
, która służy do przeglądania list elementów rozdzielanych przecinkami oraz pętli @while
służącej do wykonywania działań w zależności od określonych warunków.
Dziedziczenie stylów w Sass
Jeśli chcesz utworzyć styl zawierający wszystkie deklaracje innego stylu i kilka dodatkowych, możesz użyć dyrektywy @extend
. Można to traktować jak dziedziczenie stylów.
Na przykład, przypuśćmy, że mamy trzy rodzaje powiadomień: informacje, ostrzeżenia i błędy. Błędy i ostrzeżenia „dziedziczą” po informacjach.
.information { font-size: 10pt; color: black; border-width: 10px; } .warning { @extend .information; color: orange; } .error { @extend .information; color: red; }
Z tego zostanie wygenerowany następujący kod CSS:
.information, .warning, .error { font-size: 10pt; color: black; border-width: 10px; } .warning { color: orange; } .error { color: red; } .information
Można także stosować „dziedziczenie” łańcuchowe: criticalError extends error extends warning extends information
.
Dodawanie wiadomości dotyczących debugowania i ostrzeżeń do kompilacji Sass
Za pomocą dyrektyw @debug
i @warn
można dodawać wiadomości, które mają być wyświetlane podczas kompilacji do CSS.
Miejsce i sposób ich prezentacji zależy od używanego kompilatora Sass. Na przykład w Visual Studio z dodatkiem Web Workbench wiadomości dotyczące debugowania i ostrzeżenia są wyświetlane w okienku Output (trzeba wybrać opcję Web Workbench Output z menu rozwijanego).
Poniższe dwa wiersze kodu:
@debug 10em + 12em; @warn "głupi";
spowodują wyświetlenie następujących informacji w oknie Output:
C:WebApplication1WebApplication1Scss1.scss:185 DEBUG: 22em WARNING: głupi on line 186 of C:WebApplication1WebApplication1Scss1.scss"
Projektowanie aktywnych stron przy użyciu Sass
Projektowanie aktywnych stron polega na ukrywaniu, pokazywaniu i przeformatowywaniu elementów HTML zależnie od możliwości urządzenia używanego do ich oglądania — najczęściej szerokości ekranu. Na przykład w urządzeniach przenośnych niektóre kolumny i nagłówki, przeznaczone do oglądania na dużych ekranach, mogą zostać ukryte.
Poniżej znajduje się przykładowy kod dobierający rozmiar logo w zależności od wymiarów ekranu urządzenia:
$breakpointSmallScreen: 320px; $breakpointMediumScreen: 700px; $breakpointLargeScreen: 1200px; .headerLogo { float: left; width: 100px; @media screen and (min-width: $breakpointSmallScreen) { width: 200px; } @media screen and (min-width: $breakpointMediumScreen) { width: 300px; } @media screen and (min-width: $breakpointLargeScreen) { width: 400px; float: right; } }
Zwróć uwagę, że punkty graniczne zostały zdefiniowane w zmiennych. Dla powyższego kodu zostaną wygenerowane następujące reguły CSS:
.headerLogo { float: left; width: 100px; } @media screen and (min-width: 320px) { .headerLogo { width: 200px; } } @media screen and (min-width: 700px) { .headerLogo { width: 300px; } } @media screen and (min-width: 1200px) { .headerLogo { width: 400px; float: right; } }
Funkcje Sass do pracy z kolorami
W Sass dostępnych jest kilka przydatnych funkcji do pracy z kolorami, np. do ich przyciemniania i rozjaśniania. Pełną listę tych funkcji znajdziesz w dokumentacji Sass.
Za pomocą funkcji Sass do pracy z kolorami można na bazie jednej zmiennej koloru utworzyć schemat kolorów dla całej witryny.
Prosty przykład:
$baseSiteColour: #0000FF; $pageBackgroundColour: lighten(desaturate($baseSiteColour, 30%), 40%); $standardTextColour: darken($baseSiteColour, 30%); html { background-color: $pageBackgroundColour; } h1 { color: $baseSiteColour; } p { color: $standardTextColour; }
Ten kod spowoduje wygenerowanie następujących reguł CSS:
html { background-color: #d4d4f7; } h1 { color: blue; } p { color: #000066; }
Teraz aby zmienić kolorystykę całej witryny, wystarczy zmienić wartość zmiennej $baseSiteColour
.
Podsumowanie
Jeśli dopiero poznajesz Sass, naukę najlepiej jest zacząć od domieszek i zmiennych, ponieważ umożliwiają one natychmiastowe zredukowanie ilości pracy potrzebnej do utrzymania kod źródłowego.
Jeśli chcesz dowiedzieć się więcej na temat możliwości języka Sass, przeczytaj jego dokumentację.
Dodatkowe źródła informacji o Sass
- Oficjalna witryna języka Sass
- Biblioteka domieszek Sass
- Najświeższe wiadomości ze świata Sass i Compass. Artykuły dla początkujących, średniozaawansowanych i zaawansowanych
Niniejszy artykuł jest przeróbką Getting Started with SASS for Microsoft Developers i jest dostępny na zasadach licencji Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License