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

Crtanje laptopa samo sa CSS-om :)

Danas je bio spor dan na poslu, pa između gomile prototipova koje sam napravio za razno razne potrebe, slučajno sam napravio nešto što je ličilo na ekran laptopa… 10minuta kasnije napravio sam ovo:

Screen Shot 2013-07-10 at 7.35.30 PM

CSS:


.notebook {
  position: relative;
  width: 350px;
  margin: 25px auto;
}
.notebook .display {
  width: 250px;
  height: 175px;
  margin: 0 auto;
  background-color: #796cce;
  border: 10px solid #333;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.notebook .display:before {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 50%;
  margin-left: 2.5px;
  width: 5px;
  height: 5px;
  background: #ccc;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.notebook .bottom {
  position: relative;
  width: 350px;
  height: 12.5px;
  background: #cccccc;
  margin: 0 auto;
}
.notebook .bottom:before {
  content: '';
  position: absolute;
  top: 0;
  top: 0px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 5px;
  background: #8e8e8e;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.notebook .bottom:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  border-top: 4px solid #959595;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

HTML:


<div class="notebook">
  <div class="display"></div>
  <div class="bottom"></div>
</div>

Codepen mozete pogledati ovde

Read More