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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>