Deo zbornika Praktični Frontend

Postavljanje sistema boja sa Sass-om

Da bismo dosledno primenili dizajn, veoma je bitno na početku postaviti sistem boja na frontendu. Recimo da smo od dizajnera dobili ovu paletu osnovnih boja i ovu paletu sivih nijansi.

Korak 1: definisanje varijabli

Prvo prevodimo kodove boja u format čitljiv za ljude (sa ovom alatkom) i pravimo odgovarajuće varijable.

// osnovne boje
$jacaranda: #410533;
$wheat: #F4D7BD;
$fire: #A53F05;
$red-berry: #8C1C00;
$rosewood: #590C01;

// sive nijanse
$black: #050505;
$cod-gray: #0D0D0D;
$mine-shaft: #262626;
$bombay: #B4B5B7;
$white: #FEFEFE;

Sada smo uspostavili paletu boja za projekat, i nadalje ćemo koristi isključivo varijable. Na primer:

.primary-btn {
  color: $fire;
  background-color: $white;
}

Ukoliko neku boju nemamo u varijablama, ili ćemo je dodati ili je nećemo koristiti, kako bi dizajn ostao dosledan.

Korak 2: pravljenje pomoćnih klasa

Pored varijabli, trebaju nam i pomoćne klase za boju slova i pozadine. Da ne bismo ručno pravili sve te klase, napravićemo funkciju (mixin) kojoj prosleđujemo ime boje i njenu vrednost, a ona pravi CSS klase nazvane po toj boji:

@mixin color($name, $value) {
  .#{$name} {
    color: $value;
  }
  .#{$name}-bg {
    background-color: $value;
  }
}

Nakon toga pozivamo funkciju color sa svim bojama koje želimo:

@include color('jacaranda', $jacaranda);
@include color('wheat', $wheat);
@include color('fire', $fire);
@include color('red-berry', $red-berry);
@include color('rosewood', $rosewood);

@include color('black', $black);
@include color('cod-gray', $cod-gray);
@include color('mine-shaft', $mine-shaft);
@include color('bombay', $bombay);
@include color('white', $white);

Kao rezultat dobijamo sledeće CSS klase:

.jacaranda {
  color: #410533;
}

.jacaranda-bg {
  background-color: #410533;
}

.wheat {
  color: #F4D7BD;
}

.wheat-bg {
  background-color: #F4D7BD;
}

.fire {
  color: #A53F05;
}

.fire-bg {
  background-color: #A53F05;
}

.red-berry {
  color: #8C1C00;
}

.red-berry-bg {
  background-color: #8C1C00;
}

.rosewood {
  color: #590C01;
}

.rosewood-bg {
  background-color: #590C01;
}

.black {
  color: #050505;
}

.black-bg {
  background-color: #050505;
}

.cod-gray {
  color: #0D0D0D;
}

.cod-gray-bg {
  background-color: #0D0D0D;
}

.mine-shaft {
  color: #262626;
}

.mine-shaft-bg {
  background-color: #262626;
}

.bombay {
  color: #B4B5B7;
}

.bombay-bg {
  background-color: #B4B5B7;
}

.white {
  color: #FEFEFE;
}

.white-bg {
  background-color: #FEFEFE;
}

Korak 3: upotreba klasa

Sada je naš sistem boja uspostavljen, i pomoćne klase možemo koristiti širom projekta na sledeći način:

<p class="fire">Vel quod quis quasi illo ea amet, omnis aliquid voluptatem officia.</p>

<button class="jacaranda-bg white">I agree!</button>

Ovo što sada imamo je sasvim solidan temelj za razvoj velikih projekata.

Eksperimentisanje

Ja sam nastavio još malo da eksperimentišem za svoju zabavu. Dodao sam suptilnu boju ivica i blago posvetljenje boje slova na hover, koristeći ugrađene funkcije darken i lighten:

@mixin color($name, $value) {
  .#{$name} {
    color: $value;
  }
  .#{$name}:hover {
    color: lighten($value, 10%);
  }
  .#{$name}-bg {
    background-color: $value;
    border-style: solid;
    border-color: darken($value, 5%);
  }
}

Eksperimentišite malo za svoju zabavu, ali za projekte stvarnog sveta preporučujem da se zaustavite na koraku 3.

Srećno!