Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS na steroidima (SASS)

Zahtevi prema CSS-u svakoga dana postaju sve veći. CSS mora da bude responsive da bude kratak brz i da može da se brzo menja. Postoji način za stvaranje tako kvalitetnog CSS koda, to je SASS.

  • Login to see the comments

  • Be the first to like this

CSS na steroidima (SASS)

  1. 1. CSS na steroidima (SASS) Žarko Jović 29.09.2016 – WPMEETUP Niš
  2. 2. Žarko Jović  Full-Stack Designer (Unicorn),  Front-end developer,  Wordpress,  Graphic Designer (Print+Visual),  Ebooks (epub) @joviczarko joviczarko@gmail.com
  3. 3. Best Friends!
  4. 4. Očekivanja od CSS-a  Puno formata (smartphone, tablet, desktop, štampa, pa i TV sve više)  Eksperimentisanja i testiranja  Konzistencija kroz projekat  Brzina downloada css fajlova (manji fajlovi)  Rok - juče
  5. 5. CSS može biti zabavan, ali fajlovi postaju sve veći, kompleksniji i teži za održavanje
  6. 6. Don’t Repeat Yourself Keep It Simple Stupid Težnje (KISS & DRY)
  7. 7. Don’t Repeat Yourself Keep It Simple Stupid Težnje (KISS & DRY)
  8. 8. Pre-procesuiranje u pomoć
  9. 9. Preprocesori
  10. 10. Syntactically Awesome StyleSheets
  11. 11. Sass je zabavan Promenljive Transformacije Ugneždavanje Proširenja Operatori Miksevi …
  12. 12. SCSSSASS • Stariji metod • Uzima poravnanje u obzir • Ne koristi tačku-zarez i vitičaste zagrade • Novi i podrazumevani metod • Poravnanje nije bitno • Tačka-zarez i vitičaste zagrade su bitni Validan CSS je uvek i validan SASS, jer je SASS zapravo samo ekstenzija CSS-a. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
  13. 13. Promenljive (Variables) $ $boja_glavna: #333333; $boja_linkovi: #001eff; .mojaKlasa{ color: $boja_glavna; } a{ color: $boja_linkovi; } .mojaKlasa { color: #333333; } a { color: #001eff; } .SCSS- .CSS
  14. 14. Transformacije Boja $color_secondary: #AD141E; .div1 { background-color: $color_secondary; } .div2 { background-color: lighten( $color_secondary, 20% ); } .div3 { background-color: darken( $color_secondary, 20% ); } .div1 { background-color: #AD141E; } .div2 { background-color: #e93e49; } .div3 { background-color: #52090e; } SCSS CSS
  15. 15. Transformacije Boja darken( $base-color, 10% ) lighten( $base-color, 10% ) saturate( $base-color, 20% ) desaturate( $base-color, 20% ) adjust-hue( $base-color, 20% ) rgba( $base-color, .7 ) http://jackiebalzer.com/color
  16. 16. Ugnježdavanje (Nesting) #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } .SCSS .CSS
  17. 17. Ugnježdavanje + Nadovezivanje #main { color: black; a { font-weight: bold; &:hover { color: red; } } } #main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; }
  18. 18. Proširenje (Extend) .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } .message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } .SCSS .CSS
  19. 19. Media $break-small: 320px; $break-large: 1200px; .profile-pic { float: left; width: 250px; @media screen and (max-width: $break-small) { width: 100px; float: none; } @media screen and (min-width: $break-large) { float: right; } } .profile-pic { float: left; width: 250px; } @media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } } @media screen and (min-width: 1200px) { .profile-pic { float: right; } } .SCSS .CSS
  20. 20. Media $phone: "only screen and (max-width : 320px)"; profile-pic { float: left; width: 250px; @media #{$phone} { width: 100px; float: none; } } profile-pic { float: left; width: 250px; } @media only screen and (max-width: 320px) { profile-pic { width: 100px; float: none; } } .SCSS .CSS
  21. 21. Operatori + Sabiranje – Oduzimanje * Množenje / Deljenje % Ostatak * Mora se obratiti pažnja na jedinice operanada.
  22. 22. Operatori article { float: left; width: 600px / 960px * 100%; } aside { float: right; width: 300px / 960px * 100%; } article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; } .SCSS .CSS
  23. 23. Operatori (Pažljivo!) h2 { // font-size: 5px + 2em; // Mešanje jedinica font-size: 5px + 2px; // font-size: 5px * 2px; // Dupliranje jedinica = 10pxpx font-size: 5px * 2; // font-size: 10px / 2; // Na izlazu se isto dobija font-size: (10px / 2); }
  24. 24. Miksevi (@mixin) @mixin sample { font-size: 12px; font-weight: bold; text-decoration: underline; } p { @include sample; } p { font-size: 12px; font-weight: bold; text-decoration: underline; } .SCSS .CSS
  25. 25. Miksevi (@mixin) @mixin headline ($color, $size) { color: $color; font-size: $size; } h1 { @include headline(green, 12px); } h1 { color: green; font-size: 12px; } Sa argumentima .SCSS .CSS
  26. 26. @mixin link ($link, $visited, $hover, $active) { & { color: $link; &:visited { color: $visited; } &:hover { color: $hover; } &:active, &:focus { color: $active; } } } a { @include link(orange, blue, yellow, teal); } a.footer { @include link(blue, yellow, green, orange); } a { color: orange; } a:visited { color: blue; } a:hover { color: yellow; } a:active, a:focus { color: teal; } a.footer { color: blue; } a.footer:visited { color: yellow; } a.footer:hover { color: green; } a.footer:active, a.footer:focus { color: orange; } Komplikovaniji primer
  27. 27. Petlje @for $i from 1 through 8 { $width: percentage(1 / $i); .col-#{$i} { width: $width; } } .col-1 { width: 100%; } .col-2 { width: 50%; } .col-3 { width: 33.33333%; } .col-4 { width: 25%; } .col-5 { width: 20%; } .col-6 { width: 16.66667%; } .col-7 { width: 14.28571%; } .col-8 { width: 12.5%; } .SCSS .CSS
  28. 28. Petlje $num: 4; @while $num > 0 { .module-#{$num} { content: "#{$num}"; } $num: $num - 1; } .module-4 { content: "4"; } .module-3 { content: "3"; } .module-2 { content: "2"; } .module-1 { content: "1"; }
  29. 29. Komentari /* Ovaj komentar je * dugačak nekoliko linija. * Pošto koristi CSS sintaksu, * pojaviće se u izlazu CSS-a */ body { color: black; } // Svaki od ovih komentara je dugačak jednu liniju // Oni se neće pojaviti u generisanom CSS-u, // Zato što koriste ovakvu sintaksu. a { color: green; } // Neće se pojaviti ni ovaj
  30. 30. Uvoz (@import) // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } * Fajlovi čiji naziv počinje donjom crtom neće biti kompajlirani u samostalne fajlove.
  31. 31. Modularizacija Underscores tema kao primer
  32. 32. Postupak rada (Workflow) SCSS functions.php
  33. 33. Kompajliranje
  34. 34. Kompajliranje (GUI) Koala App LiveReload
  35. 35. Problem? Menjanje kompajliranog CSS-a direktno bez kompajlovanja CSS-a
  36. 36. Svaki put kada vršite izmene direktno na serveru, bez lokalne kopije, jedno mače ugine…
  37. 37. A još ako to radite iz WP Dashboard-a, uginu dva!
  38. 38. Očekivanja Stvarnost Vežba!
  39. 39. Pitanja? @joviczarko joviczarko@gmail.com http://sass-lang.com/http://thesassway.com/ http://www.sassmeister.com/http://koala-app.com/ Korisni linkovi

×