1 Sass – Rewolucja w CSS +

2 Problemy CSSa Brak zmiennych Brak możliwości wykonywanie obliczeń Brak zagnieżdżeń Brak możliwości wykorzystania kodu ponownie Zarządzanie dużymi projektami jest uciążliwe Prefiksy w deklaracjach typu –moz, -webkit, -o

3 Sass - Syntactically Awesome Stylesheets Sass jest pre-procesorem CSSa, którego kod przetwarzany (kompilowany) jest do plików wynikowych CSS. Sprawia, że praca z CSS może znów sprawiać przyjemność Wprowadza niezliczoną ilość udogodnień Umożliwia korzystanie z dwóch składni – klamrową (SCSS) oraz skróconą (SASS)

4 LESS Lepsza dokumentacja na stronie www Bootstrap od Twittera Nie wymaga zewnętrznych bibliotek/aplikacji oraz używania linii poleceń Łatwiej w nim zacząć Więcej rodzajów pętli Powielanie właściwości klas poprzez @extend Lepsze współgranie z Media Queries Posiada znakomitego Compassa Sassvs. http://css-tricks.com/sass-vs-less/

5 Sposoby kompilacji Sassa do CSS Z poziomu konsoli Przez aplikację z GUI Moduł do Drupala Kompilator wbudowany w IDE

6 Kompilacja z poziomu konsoli w systemie Windows Pobierz instalator z adresu rubyinstaller.org a następnie uruchom gorubyinstaller.org Krok 1 – instalacja interpretera Ruby

7 Kompilacja z poziomu konsoli w systemie Windows Krok 2 – instalacja SASSa gem install sass

8 Kompilacja z poziomu konsoli w systemie Windows Krok 3 – komplikacja pliku do CSS Kompilacja pojedynczego pliku Kompilacja całego folderu sass --watch style.scss:style.css sass --watch stylesheets/scss:stylesheets/css sass --watch [żródło]:[cel]

9 Kompilacja z poziomu konsoli w systemie Windows Krok 3 – komplikacja pliku do CSS (2) Styl wyjściowego kodu (nasted) 1.#main { 2. color: #fff; 3. background-color: #000; } 4. #main p { 5. width: 10em; } 6. 7..huge { 8. font-size: 10em; 9. font-weight: bold; 10. text-decoration: underline; }.css sass --watch style.scss:style.css --style nasted

10 Kompilacja z poziomu konsoli w systemie Windows Krok 3 – komplikacja pliku do CSS (3) Styl wyjściowego kodu (expanded) 1.#main { 2. color: #fff; 3. background-color: #000; 4.} 5.#main p { 6. width: 10em; 7.} 8. 9..huge { 10. font-size: 10em; 11. font-weight: bold; 12. text-decoration: underline; 13.}.css sass --watch style.scss:style.css --style expanded

11 Kompilacja z poziomu konsoli w systemie Windows Krok 3 – komplikacja pliku do CSS (4) Styl wyjściowego kodu (compact) 1.#main { color: #fff; background-color: #000; } 2.#main p { width: 10em; } 3..huge { font-size: 10em; font-weight: bold; text- decoration: underline; }.css sass --watch style.scss:style.css --style compact

12 Kompilacja z poziomu konsoli w systemie Windows Krok 3 – komplikacja pliku do CSS (5) Styl wyjściowego kodu (compressed) 1.#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font- weight:bold;text-decoration:underline}.css sass --watch style.scss:style.css --style compressed

13 Kompilacja przez GUI – przegląd aplikacji Darmowe Scout.app – mhs.github.io/scout-appmhs.github.io/scout-app Płatne Compass.app – compass.handlino.comcompass.handlino.com Fire.app – fireapp.handlino.comfireapp.handlino.com Codekit – incident57.com/codekit (tylko Mac)incident57.com/codekit

14 Kompilacja przez GUI Scout.app

15 Kompilacja przez GUI Scout.app (2)

16 Moduł do Drupala Możliwość używania zmiennych oraz funkcji w skórce dziedziczącej Brak konieczności instalacji Sassa na komputerze Wymaga biblioteki PHPSass github.com/richthegeek/phpsass Skompilowane pliki zapisuje do katalogu files Możliwe jest osadzanie plików SCSS przez parametr styles[] w pliku *.info skórki Sassy – drupal.org/project/sassy

17 Kompilator wbudowany w IDE Netbeans – SCSS Editor Darmowy plugin do Netbeansa jest dostępny pod adresem code.google.com/p/scss-editor.code.google.com/p/scss-editor Główne funkcje to: Podkreślanie składni Wbudowany kompilator do CSS Informuje o błędach podczas kompilacji (zapisu) pliku

18 Kompilator wbudowany w IDE Netbeans – SCSS Editor (2)

19 Kompilator wbudowany w IDE Netbeans – SCSS Editor (3) /** * @outputFile../www/css/stylesheet.css * @outputStyle compressed * @debugInfo true * @lineComments true */

20 1.table { 2. margin: 2em 0; 3. td { 4. text-align: right; 5. } 6.} 7. 8.li { 9. font: { 10. family: serif; 11. weight: bold; 12. size: 1.2em; 13. } 14.}.sass Składnia w Sassie Nowa klamrowa składnia (SCSS)

21 1.table 2. margin: 2em 0 3. td 4. text-align: right 5. 6.li 7. font: 8. family: serif 9. weight: bold 10. size: 1.2em.sass Składnia w Sassie Klasyczna na bazie wcięć (SASS)

22 1.// Komentarz jednoliniowy 2. 3./* Komentarz 4. wieloliniowy */.scss 1./* Komentarz 2. wieloliniowy */.css Składnia w Sassie Komentarze

23 Przegląd najważniejszych funkcji Sassa Zmienne Obliczenia Zagnieżdżenia Wstawki (Mixins) Funkcje Importowanie plików Dziedziczenie selektorów Pętle Instrukcje warunkowe

24 1.$mainColor: blue; 2.$fontSize: 15px; 3. 4.p { 5. color: $mainColor; 6. font-size: $fontSize; 7.}.scss 1.p { 2. color: blue; 3. font-size: 15px; }.css Funkcjonalność Sassa Zmienne

25 1.table { 2. margin: 2em 0; 3. td { 4. text-align: right; 5. } 6.} 7. 8.li { 9. font: { 10. family: serif; 11. weight: bold; 12. size: 1.2em; 13. } 14.}.scss 1.table { 2. margin: 2em 0; 3.} 4.table td { 5. text-align: right; 6.} 7. 8.li { 9. font-family: serif; 10. font-weight: bold; 11. font-size: 1.2em; 12.}.css Funkcjonalność Sassa Zagnieżdżenia

26 1.@mixin clearfix { 2. display: inline-block; 3. &:after { 4. content: "."; 5. display: block; 6. height: 0; 7. clear: both; 8. visibility: hidden; 9. } 10. * html & {height: 1px} 11.} 12. 13..content { 14. @include clearfix; 15.}.scss 1..content { 2. display: inline-block;} 3..content:after { 4. content: "."; 5. display: block; 6. height: 0; 7. clear: both; 8. visibility: hidden; } 9. * html.content { 10. height: 1px; }.css Funkcjonalność Sassa Wstawki (Mixins)

27 1.@mixin my-border($color, $width, $style: dashed) { 2. border: { 3. color: $color; 4. width: $width; 5. style: $style; 6. } 7.} 8. 9.p { @include my-border(blue, 1px); }.scss 1.p { 2. border-color: blue; 3. border-width: 1px; 4. border-style: dashed; }.css Funkcjonalność Sassa Wstawki (Mixins) z argumentami

28 1.div { 2. background: lighten(#000, 50%); 3.}.scss 1.div { 2. background: gray; }.css Funkcjonalność Sassa Funkcje 1.@function pow($base, $exp: 2) { 2. @return $base * $exp; 3.}.scss

29 lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color, $amount) grayscale($color) invert($color) Funkcje operujące na kolorach round($value) ceil($value) floor($value) Funkcje operujące na liczbach Funkcjonalność Sassa Funkcje (wbudowane)

30 @import "foo.scss"; Import pliku z uwzględniając rozszerzenie @import "foo"; Import pliku bez podawania rozszerzenia, do dokumentu zostanie dołączony plik foo.scss @import "foo", "bar"; Import wielu plików jednocześnie Funkcjonalność Sassa Importowanie plików

31 1..error { 2. border: 1px #f00; 3. background: #fdd; 4.} 5..error.intrusion { 6. font-size: 1.3em; 7. font-weight: bold; 8.} 9. 10..badError { 11. @extend.error; 12. border-width: 3px; 13.}.scss 1..error,.badError { 2. border: 1px #f00; 3. background: #fdd; 4.} 5. 6..error.intrusion, 7..badError.intrusion { 8. font-size: 1.3em; 9. font-weight: bold; 10.} 11. 12..badError { 13. border-width: 3px; 14.}.css Funkcjonalność Sassa Dziedziczenie selektorów

32 1.@for $i from 1 through 3 { 2..item-#{$i} { width: 2em * $i; } 3.}.scss 1..item-1 { 2. width: 2em; } 3..item-2 { 4. width: 4em; } 5..item-3 { 6. width: 6em; }.css Funkcjonalność Sassa Pętle (for)

33 1.@each $animal in puma, sea-slug, egret, salamander { 2..#{$animal}-icon { 3. background-image: url('/images/#{$animal}.png'); 4. } 5.}.scss 1..puma-icon { 2. background-image: url('/images/puma.png'); } 3..sea-slug-icon { 4. background-image: url('/images/sea-slug.png'); } 5..egret-icon { 6. background-image: url('/images/egret.png'); } 7..salamander-icon { 8. background-image: url('/images/salamander.png'); }.css Funkcjonalność Sassa Pętle (each)

34 1.$i: 6; 2.@while $i > 0 { 3..item-#{$i} { width: 2em * $i; } 4. $i: $i - 2; 5.}.scss 1..item-6 { 2. width: 12em; } 3. 4..item-4 { 5. width: 8em; } 6. 7..item-2 { 8. width: 4em; }.css Funkcjonalność Sassa Pętle (while)

35 1.$type: monster; 2.p { 3. @if $type == ocean { 4. color: blue; 5. } @else if $type == matador { 6. color: red; 7. } @else if $type == monster { 8. color: green; 9. } @else { 10. color: black; 11. } 12.}.scss 1.p { 2. color: green; }.css Funkcjonalność Sassa Instrukcje warunkowe

36 Compass (compass-style.org) Jest tym dla Sassa co jQuery dla JavaScriptu http://sonspring.com/journal/sass-for-designers

37 Compass z konsoli gem install compass sass --compass myfile.scss myfile.css sass --compass --watch

38 1.@import "compass/css3"; 2..simple { @include border-radius(4px, 4px); }.scss 1..simple { 2. -webkit-border-radius: 4px 4px; 3. -moz-border-radius: 4px / 4px; 4. -khtml-border-radius: 4px / 4px; 5. border-radius: 4px / 4px; }.css CSS 3 – koniec z prefiksami Zaokrąglone rogi

39 1.@import "compass"; 2. 3.#svg-gradient { 4. $experimental-support-for-svg: true; 5. @include background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2));}.scss CSS 3 – koniec z prefiksami Gradienty

40 1.#svg-gradient { 2. background-image: url('data:image/svg+xml;base64,PD94... Zz4g'); 3. background-size: 100%; 4. background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2)); 5. background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); 6. background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); 7. background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); 8. background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); 9.}.css CSS 3 – koniec z prefiksami Gradienty (2)

41 1.@import "compass/reset";.scss Reset domyślnych styli przeglądarki Reset wszystkich styli 1.@import "compass/reset/utilities"; 2. 3.body { 4. #main-content { 5. @include nested-reset; } }.scss Reset wybranych elementów

42 1./* line 2, global.scss */ 2..infobox.message { 3. border: 1px solid red; } 4./* line 4, global.scss */ 5..infobox.message.title { 6. color: red; } 7./* line 6, global.scss */ 8..infobox.user { 9. border: 1px solid black; } 10./* line 8, global.scss */ 11..infobox.user.title { 12. color: black; } Debugowanie w Sassie Komentarz nad każdym selektorem --line-comments.css

43 Debugowanie w Sassie FireSass https://addons.mozilla.org/pl/firefox/addon/firesass-for-firebug --debug-info

44 Using Sass & Compass in Drupal Theming (DrupalCon Denver 2012) Nathan Smith, Matt Farina Dokumentacja Sassa http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Pragmatic Guide to Sass Hampton Catlin, Michael Lintorn Korzystałem z

45 Dziękuję, to była jedynie mała część możliwości jakie dostarcza Sass/Compass