CSS na steroidima (SASS)

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

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’t
Repeat
Yourself
Keep
It
Simple
Stupid
Težnje (KISS & DRY)

Syntactically Awesome StyleSheets

Sass je zabavan
Promenljive
Transformacije
Ugneždavanje
Proširenja
Operatori
Miksevi
…

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 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);
}

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.

Modularizacija
Underscores tema kao primer

Postupak rada (Workflow)
SCSS
functions.php

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!

Pitanja?
@joviczarko
joviczarko@gmail.com
http://sass-lang.com/http://thesassway.com/
http://www.sassmeister.com/http://koala-app.com/
Korisni linkovi

CSS na steroidima (SASS)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (18)

CSS na steroidima (SASS)