Biz frontend developerlar genel anlamda kodlama yaparken en çok html css kodlaması yaparız. Kodlama yaparken de tekrarlanan yapıları tekrar tekrar yazmaktansa bir component yapısı edasında hazırlayıp kodlama içerisinde include , yani dahil etme işlemi yaparız. Css kodlaması yaparken genelde sass veya scss araçlar kullanırız. Bu araçlar içerisinde ise tekrarlanan yapıları oluşturabileceğimiz bir yapı olan mixin yapısı bulunmaktadır.
Scss mixin nedir?
Css kodlaması yaparken bir çok kodlamayı tekrarlarız mesela bir kutu içerisindeki nesneleri ortada birleştirmek için aşağıdaki kodları kullanırız.
.box {
display: flex;
justify-content: center;
align-items: center;
}
Bu kodları bir çok kez tekrardan yazmaktan BoxCenter isminde bir mixin oluşturup bu kodları oluşturmamız gerektiğinde dahil etmemiz bizim işimizi biraz daha kolaylaştıracaktır. Ek olarak aynı kodları yazma konusunda kaybettiğimiz zamanı minimuma indirecektir.
Mixin yapısı ve oluşturulması
Scss de mixin oluşturmakta , kullanmakta aslında çok basittir. Bir programlama dilinde bir fonksiyon nasıl oluşturuluyor ise benzer bir yapıda da scss de mixin yapısı oluşturulabiliyor.
@mixin isim(parametre veya parametreler){
// Css kodları
}
Bir mixin ı parametreli veya parametresiz olarak olarak oluşturabilirsiniz. Bu tamamen sizin isteğinize kalmıştır. Ben her iki kullanımı de anlatıyor olacağım.
Parametresiz mixin oluşturması ve kullanılması
BoxCenter adında bir mixin oluşturuyoruz. Ardından .box içerisine ” @inculude BoxCenter() ” oluşturduğumuz mixin’ı dahil ediyoruz. İşte bu kadar basit.
@mixin BoxCenter() {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
color: red;
@include BoxCenter();
}
Çıktısı
Birde css çıktısına bakalım. Bu makaleyi okurken scss i nasıl derletip css çıktısı alabileceğiniz biliyor olarak varsayıyorum. 😁
.box {
width: 100px;
height: 100px;
color: red;
display: flex;
justify-content: center;
align-items: center;
}
Parametreli mixin oluşturması ve kullanılması
Genel anlamda parametreli mixinlar oluşturmak daha fazla tercih edilmekte.
@mixin BoxCenter($d, $jc, $ai) {
display: $d;
justify-content: $jc;
align-items: $ai;
}
.box {
width: 100px;
height: 100px;
color: red;
@include BoxCenter(flex, start, end);
}
Çıktısı
Yukarıdaki kodun çıktısı da aşağıdaki gibi olacaktır.
.box {
width: 100px;
height: 100px;
color: red;
display: flex;
justify-content: start;
align-items: end;
}
Evet, bu blog yazımda scss da nasıl parametreli veya parametresiz mixin oluşturulur ve kullanılır onu öğrenmiş oldunuz. Scss kulanırken mutlaka kendi mixinlarınızı oluşturacağınızda hem fikirim. 😁 Bir sonraki blog yazımda görüşmek üzere hoşçakalın.