LARAVEL
SASSSASS @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ı...