Sass - Mixins

Stefanescu Mihai 2 years ago 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.

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.