CSS Preprocessors (SCSS & LESS)

или ти по нашки CSS предпроцесори.

Ја сам се до сада сусрео са два дотична предпроцесора ЅCSS и LESS.

Од два најпознатије frameworks за развој у FrontEnd, један је написа са LESS (Boostrap) а други је написан са SCSS (Foundation), па ћемо ми сада погледамо оба а вама остављам да изабере онај који вам се више допада. За примере ћу користи CodePen.

Па да почнемо… :)

Променљиве:

SCSS
  $white: #fff;
  $spacing: 25px;

  .classname {
    color: $white;
    margin: $spacing;
  }
LESS
  @white: #fff;
  @spacing: 25px;

  .classname {
    color: @white;
    margin: @spacing;
  }

Скоро па идентично, зар не?

Угњеждавање и њихова правила

SCSS
ul {
  margin: 20px auto;
  list-style: none;
    
  li {
    padding: 10px 20px;
        
    a {
      color: #333;
      
      &:hover {
        color: #000;          
      }
    }
  }
}
LESS
ul {
  margin: 20px auto;
  list-style: none;
    
  li {
    padding: 10px 20px;
        
    a {
      color: #333;
      
      &:hover {
        color: #000;          
      }
    }
  }
}

Апсолутно идентично.
Ово су биле основе, сада крећемо у мало напредније ствари где ће почети да се појављују прве разлике између два предпроцесора…

Mixins

Миксеви(нећу проналазити српску реч за ово) су скупови својстава које могу да се убаце у својства неког елемента позивање. Такође, миксеви се могу понашати и као функције и прихватати аргументе.

SCSS
@mixin razmaci($razmak: 10px) {
  padding: $razmak;
}
@mixin crvena-zvezda-scheme {
  background-color: white;
  color: red;
  border: 1px solid red;
}

@mixin partizan-scheme {
  background-color: white;
  color: black;
  border: 1px solid black;
}

// Upotreba
.delije {
  @include razmaci;
  @include crvena-zvezda-scheme;
}

.grobari {
  @incldue razmaci(20px);
  @include partizan-scheme;
}
LESS
.razmaci(@razmak: 10px) {
  padding: @razmak;
}
.crvena-zvezda-scheme {
  background-color: white;
  color: red;
  border: 1px solid red;
}

.partizan-scheme {
  background-color: white;
  color: black;
  border: 1px solid black;
}

// Upotreba
.delije {
  .razmaci;
  .crvena-zvezda-scheme;
}

.grobari {
  .razmaci(20px);
  .partizan-scheme;
}

Ево и тога примењеног.

Функције

Oба предпроцесора долазе са подршком за основне математичке функције, као и још неколико врло корисних и практичних функција које вам могу помоћи приликом развоја сајтова.

SCSS
$razmak: 20px;
$crvena: red;
$bela: #fff;
$crna: #000;

.delije {
  background-color: $crvena;
  color: $bela;
  padding: $razmak / 2; // 10px
  margin: $razmak * 2; // 40px
  
  &:hover {
    color: darken($bela, 20%); // potamni boju
  }
}

.grobari {
  background-color: $crna;
  color: $bela;
  padding: $razmak + 10; // 30px
  margin: $razmak - 10; // 10px
  
  &:hover {
    background-color: lighten($crna, 20%); // posvetli boju
  }
}
LESS
@razmak: 20px;
@crvena: red;
@bela: #fff;
@crna: #000;

.delije {
  background-color: @crvena;
  color: @bela;
  padding: @razmak / 2; // 10px
  margin: @razmak * 2; // 40px
  
  &:hover {
    color: darken(@bela, 20%); // potamni boju
  }
}

.grobari {
  background-color: @crna;
  color: @bela;
  padding: @razmak + 10; // 30px
  margin: @razmak - 10; // 10px
  
  &:hover {
    background-color: lighten(@crna, 20%); // posvetli boju
  }
}

У неком од наредних чланака, ући ћемо у детаљније и још напредније ствари које можете да радите са предпроцесорима…

SCSS
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

… као петље на пример? ;)

Read More

FrontEnd development – alatke

Verovatno najbitniji aspekt rada jednog programera su alatke koje koristi za kvalitetniji i produktivniji rad. Međutim i tu postoje aplikacije koje su bitnije od ostalih a to je, naravno, ona u kojoj svi mi pišemo naš kod…

Dakle, editori.

Ja sam ljubitelj SublimeText-a, koji ću vam ukratko predstaviti sa objašnjenjem zašto je baš isti moj omiljeni editor i zašto biste trebali da ga, barem, probate.

* Multi cursor podrška
* Plugins & snippets
* Brzina

Dovoljno je da čovek ode na sajt [sublime text](http://www.sublimetext.com/) kako bi mogao da vidi koliko multi-cursor podrška znači u svakodnevnom radu sa kodom.

MultiCursors

 

SublimeText ne dolazi sa instaliranim menadžerom za pluginove ili snippets ali instalirati isti je izuetno lako. [Package Control](https://sublime.wbond.net/). Podržava stare(a i nove) Textmate bundles. ;)

PackageControl

U pitanju je tkzv “fuzzy search” koja radi po principu traženja patterna u bilo kom delu reč ili čak rečenice. Vrlo korisno kada se traži nešto zašta nemamo jasno definisani naziv ili znamo kako bi se možda moglo zvati.

 

Brzinu ćete najbolje videti kada budete instalirali program i počeli da kodirate u istom…

Uživajte!

Read More