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