Shebang.pl

Sass — podstawy

Łukasz Piwko

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

Exit mobile version