SASS-SCSS ile İf-else ve Döngüler (@each,@for,@while,@if,@else)
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 @import, @mixin, @extend, @use Kullanımı
Bu yazımızda SASS ile kullanılan bazı kuralları öğrenenceğiz. Bu SASS Kuralları çok kullanılmakta ve bilinmesi gereken temel kurallardır. SASS İç İçe Yazma Kuralı (SASS NESTED) SASS CSS direktifleri açılan parantez blokların içerisine yazarak devam etmektedir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ul{ margin:0; padding:0; list-style-type: none; width: 20%; & > li{ border-bottom: 1px solid #333; & > a{ background-color: olive; color:#333; padding: .5rem; text-decoration: none; display: block; &:hover{ background-color: #333; color:olive; } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ul { margin: 0; padding: 0; list-style-type: none; width: 20%; } ul > li { border-bottom: 1px solid #333; } ul > li > a { background-color: olive; color: #333; padding: 0.5rem; text-decoration: none; display: block; } ul > li > a:hover { background-color: #333; color: olive; } |
Bu örnektende anlaşılacağı gibi açlan CSS direktifinin parantez bloğunun içersine yeni bir seçici eklenerek yeni bir blok oluşturuluyor. […]
Devamı...SASS Değişken Tanımlama (Sass Variables)
Selam, bu yazımızda sass ile değişken tanımlamayı öğrenim bir kaç örnek uygulama yapacağız. Sizlerinde şahit olduğu gibi sass gün geçtikçe bir çok uygulamada kullanım kolaylığı sağlıyor. Bu sebepten bir çok projede style şablonlarının daha iyi düzenlenebilmesi için sass tercih ediliyor. Aynı zamanda bootstrap gibi bir çok sitil kütüphanesini daha etkin ve kişiselleştirerek kullanmamızı sağlıyor. Sass […]
Devamı...