Sass ÔÇö podstawy

> Dodaj do ulubionych

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

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