CSS na steroidima (SASS)

Žarko Jović

29.09.2016 – WPMEETUP Niš

Žarko Jović

Full-Stack Designer (Unicorn), Front-end developer, Wordpress, Graphic Designer (Print+Visual), Ebooks (epub)

@joviczarko

joviczarko@gmail.com

Best Friends!

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

CSS može biti zabavan, ali fajlovi postaju sve veći, kompleksniji i

teži za održavanje

Don’tRepeatYourself

KeepItSimpleStupid

Težnje (KISS & DRY)

Don’tRepeatYourself

KeepItSimpleStupid

Težnje (KISS & DRY)

Pre-procesuiranje u pomoć

Preprocesori

Syntactically Awesome StyleSheets

Sass je zabavan

PromenljiveTransformacijeUgneždavanje

ProširenjaOperatoriMiksevi

…

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

Promenljive (Variables) $

$boja_glavna: #333333;$boja_linkovi: #001eff;

.mojaKlasa{color: $boja_glavna;

}

a{color: $boja_linkovi;

}

.mojaKlasa {color: #333333;

}

a {color: #001eff;

}

.SCSS- .CSS

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

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

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

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;

}

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

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

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

Operatori

+ Sabiranje

– Oduzimanje

* Množenje

/ Deljenje

% Ostatak

* Mora se obratiti pažnja na jedinice operanada.

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

Operatori (Pažljivo!)

h2 {// font-size: 5px + 2em; // Mešanje jedinicafont-size: 5px + 2px;

// font-size: 5px * 2px; // Dupliranje jedinica = 10pxpxfont-size: 5px * 2;

// font-size: 10px / 2; // Na izlazu se isto dobijafont-size: (10px / 2);

}

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

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

@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

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

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";

}

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

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.

ModularizacijaUnderscores tema kao primer

Postupak rada (Workflow)

SCSS

functions.php

Kompajliranje

Kompajliranje (GUI)

Koala App

LiveReload

Problem?

Menjanje kompajliranog

CSS-a direktno bez

kompajlovanja CSS-a

Svaki put kada vršite izmene direktno na serveru, bez lokalne kopije, jedno mače ugine…

A još ako to radite iz WP Dashboard-a, uginu dva!

Očekivanja Stvarnost

Vežba!

Pitanja?

@joviczarko

joviczarko@gmail.com

http://sass-lang.com/http://thesassway.com/

http://www.sassmeister.com/http://koala-app.com/

Korisni linkovi