Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.
Wstawki i funkcje są jednymi z najpotężniejszych narzędzi developera pracującego z SASS. Pomagają tworzyć kod zgodny z DRY i znacząco ułatwiają nam pracę. Dziedziczenie selektorów można porównać do dziedziczenia w programowaniu obiektowym, chodź w tym przypadku dziedziczone są tylko właściwości, ale żeby nie przedłużać przejdźmy do konkretów.
Wstawki
Wstawki pozwalają na powtórne użycie nie tylko właściwości, ale też całych selektorów. Definiujemy je używając dyrektywy @mixin i zawieramy w innym selektorze (lub poza nim) za pomocą dyrektywy @include.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @mixin my-box-sizing( $box-sizing : border-box ) { -moz-box-sizing: $box-sizing; -webkit-box-sizing: $box-sizing; box-sizing: $box-sizing; } @mixin my-font-face( $font-name, $font-file ) { @font-face { font-family: $font-name; src: url('#{$font-file}.eot?') format('eot'), url('#{$font-file}.woff') format('woff'), url('#{$font-file}.ttf') format('truetype'); } } @include my-font-face( Roboto, /fonts/roboto/Roboto); *, *::after, *::before { @include my-box-sizing; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | @font-face { font-family: Roboto; src: url("/fonts/roboto/Roboto.eot?") format("eot"), url("/fonts/roboto/Roboto.woff") format("woff"), url("/fonts/roboto/Roboto.ttf") format("truetype"); } /* line 22, ../sass/mixins.scss */ *, *::after, *::before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
Jak widać w powyższym kodzie wstawki możemy umieszczać wewnątrz selektorów (my-box-sizing) oraz poza nimi (my-font-face). Zalety korzystania z wstawek są widoczne od razu, a ich elastyczność podnosi możliwość przekazywania parametrów. Tak jak już na pewno zauważyłeś parametry mogą mieć wartości domyślne, wartość domyślna poprzedzona jest dwukropkiem.
Funkcje
Funkcje podobnie jak wstawki przyjmują parametry lecz nie służą do wstrzykiwania kodu. Funkcje jak w programowaniu zwracają jakieś wartości. Głównie funkcji używa się do wykonywania obliczeń za pomocą standardowych operatorów ( +, -, *, / i %). Istnieje też cała gama funkcji wbudowanych, które umożliwiają pracę z barwami i pozwalają m. in. na zmianę jasności czy nasycenia.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $base-font-size: 16px; $base-line-height: 16px * 1.5; $blue: blue; $blue-dark: darken($blue, 5%); $blue-light: lighten($blue, 10%); @function emCalc($size-in-pixels, $base : $base-font-size) { @return $size-in-pixels / $base * 1em; } h1 { font-size: emCalc(72px); margin-bottom: emCalc($base-line-height, 72px); } a { color: $blue-light; &:hover { color: $blue-dark; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* line 13, ../sass/functions.scss */ h1 { font-size: 4.5em; margin-bottom: 0.33333em; } /* line 18, ../sass/functions.scss */ a { color: #3333ff; } /* line 20, ../sass/functions.scss */ a:hover { color: #0000e6; } |
Deklaracja funkcji rozpoczyna się dyrektywą @function, wartość która zostanie zwrócona poprzedzona jest dyrektywą @return.
Dziedziczenie selektorów
Dziedziczenie selektorów polega na rozszerzaniu jednego selektora drugim, może to wydawać się niejasne, ale w praktyce jest to najłatwiejsze z dzisiaj omawianych zagadnień. Na pewno znany jest Ci problem opływania elementów na stronie, alby sobie z nim poradzić stosujemy klasy tj. clearfix czy group. Rozwiązanie to ma jedną wadę, kod HTML złożonej witryny zalany jest dziesiątkami klas clearfix albo jej odpowiednikami, z pomocą przychodzi dziedziczenie selektorów.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .group:after { content: ""; display: table; clear: both; } .small-box { width: 50px; height: 50px; padding: 5px; } .element-with-floating-childs { @extend .group; } .small-box-red { @extend .small-box; color: red; } .small-box-red { @extend .small-box; color: blue; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* line 1, ../sass/selector-inheritance.scss */ .group:after, .element-with-floating-childs:after { content: ""; display: table; clear: both; } /* line 7, ../sass/selector-inheritance.scss */ .small-box, .small-box-red { width: 50px; height: 50px; padding: 5px; } /* line 18, ../sass/selector-inheritance.scss */ .small-box-red { color: red; } /* line 23, ../sass/selector-inheritance.scss */ .small-box-red { color: blue; } |
Za pomocą dyrektywy @extend możemy rozszerzyć właściwości jednego selektorem innym selektorem, ale jak widać na skompilowanym już kodzie nie jest to tylko dopisanie dodatkowych właściwości do selektora lecz zarządzanie selektorami w taki sposób, aby nie powtarzać poszczególnych właściwości i zachować największą wydajność. Jeżeli jesteś programistą zauważysz, że przykład klasy small-box ma coś wspólnego z polimorfizmem i dobrze ;)
Interpolacja wg. SASS
Jak już pewnie zauważyłeś w przykładzie ze wstawką my-font-face zmienna z nazwą czcionki użyta jest w sposób inny niż cała właściwość. Jeżeli zmienną weźmiemy w klamry poprzedzając te klamry znakiem # to mamy możliwość użycia jej w dowolnym miejscu w arkuszu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .small-box { width: 50px; height: 50px; padding: 5px; } @mixin small-box-creator($name: black, $color: #000) { .small-box-#{$name} { @extend .small-box; color: $color; } } @include small-box-creator; @include small-box-creator(red, #EA0E0E); @include small-box-creator(blue, #0E80EA); @include small-box-creator(green, #39D328); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* line 1, ../sass/interpolation.scss */ .small-box, .small-box-black, .small-box-red, .small-box-blue, .small-box-green { width: 50px; height: 50px; padding: 5px; } /* line 10, ../sass/interpolation.scss */ .small-box-black { color: black; } /* line 10, ../sass/interpolation.scss */ .small-box-red { color: #ea0e0e; } /* line 10, ../sass/interpolation.scss */ .small-box-blue { color: #0e80ea; } /* line 10, ../sass/interpolation.scss */ .small-box-green { color: #39d328; } |
Podsumowanie
W kolejnym wpisie zajmiemy się kilkoma dyrektywami pozwalającymi na sterowanie przepływem czyli pętle i instrukcje warunkowe.
W tak zwanym międzyczasie zachęcam do przeglądnięcia funkcji wbudowanych.
