LARAVEL
SASS
Merhaba, bu yazımızda scss ile if-else kullanımını ve döngülerler nasıl çalışacağımızı öğreneceğiz. Sass ve scss gün geçtikçe yaygınlaşıyor. Bu css yazımlarını bilmemiz bize tasarımda daha kolay ve modüler tasarımlar çıkarmamızı sağlıyor.
SASS-SCSS if-else Kullanımı
Diğer yazılım dillerinden de aşina olduğunuz gibi scss if-else aynı maksat ile kullanılmaktadır. Bir karar yapısı oluşturmak için kullanıyoruz. Aşağıdaki uygulamamızda bir @mixin kullanıyoruz ve içerisinde borderlar ile üçgen tanımlaması yapıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @mixin ucgen($yon,$color,$genislik){ border-style: solid; border-width: $genislik; border-color: transparent; @if $yon == top{ border-bottom-color: $color; } @else if $yon == right { border-left-color: $color; } @else if $yon == bottom { border-top-color: $color; } @else if $yon == left { border-right-color: $color; } @else{ border-color: $color; } } div{ display: inline-block; @include ucgen(top,red,20px); } |
1 2 3 4 5 6 7 | div { display: inline-block; border-style: solid; border-width: 20px; border-color: transparent; border-bottom-color: red; } |
Bu uygulamada istediğmiz yönde nesneye üçgen kenarlık oluşturmaktayız. Yine teksatırlık if kullanımılarıda scss’da mecuttur. İsterseniniz aşağıda bunula ilgili bir örnek daha verlim.
1 2 3 4 5 6 7 8 9 10 11 12 | @mixin kutu($width,$color,$border:false){ width: $width; height: $width; background-color: $color; @if $border { border:2px solid #333; } } div{ @include kutu(300px,yellowgreen,true) } |
1 2 3 4 5 6 | div { width: 300px; height: 300px; background-color: yellowgreen; border: 2px solid #333; } |
Burda kutu oluşturmasını için genişlik ve renk veriyoruz. Üçüncü parametre ise border değeri. Varsayılan olarak false değeri veriyoruz. Eğer oluşturacağımız kutuda kenarlık istiyorsak $border değerini true vermemiz yeterli.
SASS-SCSS @each Kullanımı
@each ile dünamik olarak nesne ve sınıflar oluşuturabilmekteyiz. Bu sayde sınıf oluşturmalarımızı dinamik hale getirmiş oluyoruz. Bunu aşağıdaki örnekle daha iyi öğrenelim.
1 2 3 4 5 6 7 8 | $fontSize : 14px, 24px, 32px, 38px; @each $size in $fontSize { .size-#{$size}{ font-size: $size; line-height: $size; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .size-14px { font-size: 14px; line-height: 14px; } .size-24px { font-size: 24px; line-height: 24px; } .size-32px { font-size: 32px; line-height: 32px; } .size-38px { font-size: 38px; line-height: 38px; } |
Burda $fontSize değişkenine dört adet birbirinden farklı font değeri atadık. Bu değişkeni scss’da @each döngüsüne sokarak dört adet yeni css sınıfı oluşturduk.
Bir başka kullanım örneği ise farklı bir veri yapısı olan map ile scss’da @each kullanımı yapılmıştır.
1 2 3 4 5 6 7 | $icons: ("disk": "\1F4BF", "pc": "\1F4BB", "phone": "\1F4DE"); @each $isim, $sembol in $icons { .icon-#{$isim}::before { content: $sembol; } } |
1 2 3 4 5 6 7 8 9 10 11 | .icon-disk::before { content: "💿"; } .icon-pc::before { content: "💻"; } .icon-phone::before { content: "📞"; } |
Bu örneğimizde ise belirli sembollerden oluşan bir map değerimiz mevcut. Scss’da @each ile döngüye sokarak bu iconların css sınıflarını oluşturmaktayız.
SASS ile @for Kullanımı
Scss ile de @for döngüsü oluştura bilmekteyiz. Burada through parametresini bir intager değer verdiğimizde 0 dan başlayarak ilgili değere kadar bir döngü oluşturmamızı sağlamaktadır. Aşağıdaki scss örneği ile bunu daha iyi değerlendirelim.
1 2 3 4 5 6 7 8 | @use 'sass:list'; $fontList : 14px 22px 36px; @for $i from 1 through 3{ .f-#{$i}{ font-size: list.nth($fontList , $i ) } } |
1 2 3 4 5 6 7 8 9 10 11 | .f-1 { font-size: 14px; } .f-2 { font-size: 22px; } .f-3 { font-size: 36px; } |
Bu örneğimizde list veri tipini kullanacağımız için sass dosyamıza @use 'sass:list'; ile list sınıfımızı dahil ediyoruz.Daha sonra $fontList adında bir değişken oluşturyoruz ve @for ile scss dosyamızda bu listi döngüye sokuyoruz.
CSS dosyamızsa üç tane font sınıfı oluşuyor.
SASS-SCSS İle @while Kullanımı
1 2 3 4 5 6 7 8 9 | @use 'sass:list'; $fontList : 14px 22px 36px; $say : 1; @while $say<=list.length($fontList){ .f-#{$say}{ font-size: list.nth($fontList , $say ); } $say:$say+1; } |
1 2 3 4 5 6 7 8 9 10 11 | .f-1 { font-size: 14px; } .f-2 { font-size: 22px; } .f-3 { font-size: 36px; } |
Bu örneğimizde oluşturduğumuz bir sass list’i @while döngüsüne sokarak yeni font sınıfları oluşturduk. Döngümüz diğer yazılım dillerinde olduğu gibi bir şarta bağlı. Burada sayac tanımlayarak oluşturduğumuz scss list adetince dönmesini sağladık. Döngü her seferinde $say değişkenimizi bir artırdı.
Evet bu yazımızda da scss-sass’da if-else karar yapısı ile @each,@while,@for döngülerini öğrenmiş olduk. Faydalı olması umuduyla başarılar.