
SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Mixin(fonksiyon olarak düşünebilirsiniz) tanımlama ve kullanma, Extend(genişletme) gibi konulara değiniyor olacağım.
Mixin kavramında; bir fonksiyon gibi yazdığımız bir blok stil’i “@include” ifadesi ile çağırarak istediğimiz yere uygulanmasını sağlayabiliyoruz. Hatta oluşturduğumuz mixin için parametre tanımlayarak, parametrik olmasını da sağlayabiliyoruz.
Extend kavramında ise; stil özelliklerini inherit(miras) alabilmeyi sağlıyoruz. “@Extend” anahtar ifadesi ile extend edilen stiller bir araya gelerek css dosyada tanımlanıyorlar. Basitçe örnek vermek gerekirse; aşağıdaki gibi bir css dosya oluşturmak istiyorsak;
CSS:
.button, .button1, .button2 {
/* button, button1, button2 için ortak stiller */
color: #ddd;
font-size: 12pt; }
.button1 {
/* button1 için özelleştirilmiş stiller */
border: 1px solid green; }
.button2 {
/* button2 için özelleştirilmiş stiller */
border: 1px solid black; }
Aşağıdaki gibi SASS dosyamızı kodlamamız ve .button1 ve .button2 isimli stilleri .button stilinden extend etmeli ve farklı özelliklerini yine içine tanımlamalıyız.
SCSS:
.button{
color: #ddd;
font-size: 12pt;
}
.button1
{
@extend .button;
border: 1px solid green;
}
.button2
{
@extend .button;
border: 1px solid black;
}
Böylece CSS kodundaki ilk stil’i (“.button, .button1, .button2”) elde etmiş oluruz. Özet olarak; @extend anahtarı kullanılan stiller @extend anahtarı ile kullanılan stil’le birleştirilerek css dosyada tanımlanırlar.

Bunu beğen:
Beğen Yükleniyor...