Sass - Mixins

postat acum 2 ani de Stefanescu Mihai in categorie Sass si Scss

In acest articol am sa va vorbesc despre mixins. Mixins sunt oarecum similare cu “functii” si le puteti folosi pentru a seta diferite atribute ce necesita mai multe prefixe pentru diverse browsere si pentru a le refolosi le puteti da parametri. Stiu, nu am explicat destul de ok chestia asta incat sa inteleaga toata lumea, dar am sa incerc sa va arat ce poate face un mixin cu un exemplu simplu.

Pentru a intelege mai bine ce este un misin am sa va dau ca si exemplu codul de rotunjire al colturilor unui element. Toti am rotunjit niste colturi la un moment dat, si cu siguranta am observar cat de  multe lucruri trebuie scriem pentru a realiza acest lucru:

 -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      -ms-border-radius: 5px;
          border-radius: 5px;

Si pentru fiecare element ale colturi le dorim rotunjite trebuie sa scriem 4 linii de CSS…si nu-i prea placut…

Sass ne vine in ajutor cu aceste mixin-uri si ne lasa sa facem urmatorul lucru:

@mixin colturi-rotunde($parametru) {
  -webkit-border-radius: $parametru;
     -moz-border-radius: $parametru;
      -ms-border-radius: $parametru;
          border-radius: $parametru;
}

Acum probabil v-a intrebati “Bine bine, avem acest mixin, dar ce facem cu el?

Pai, il includem in elementul/elementele in care dorim sa avem colturi rotunjite astfel:

.elementul-meu{
    @include colturi-rotunde(5px);
    background: #efefef;
    color: #000;
    font-size: 14px;
}

C-am asta este tot ce va pot spune despre mixin-uri, dar daca aveti intrebari nu ezitati sa ma contactati.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!