SASS Gruplama ve :hover, :active Selector Kullanımı

SASS CSS kullanımının hayatımıza getirdiği bazı kolaylıklar var. Bu kolaylıklardan birisi gruplama özelliği. Yani semantik olarak içiçe bulunan elementler için ayrı ayrı satırlarda css kodu yazmaya gerek yok.

Örnek ile açıklayacak olursak;

HTML

<div class="container">
   <div class="header"></div>
   <div class="body"><div>
</div>

 

Klasik CSS Yazımı

.container{width : 500px; height : 250px; }
.container .header{font-size:16px; font-weight:bold; background-color:#ccc}
.container .body{font-size:14px; background-color:#fff}

 

SASS CSS Yazımı

.container{
    width : 500px; height : 250px; 
    .header{font-size:16px; font-weight:bold; background-color:#ccc}
    .body{font-size:14px; background-color:#fff}
}

 

Ayrıca grup içinde :active, :hover gibi selectorler kullanabilmek için başlarına aşağıdaki örnekteki gibi & işareti eklenmesi gerekir.

.container{
    width : 500px; height : 250px; 
    .header{font-size:16px; font-weight:bold; background-color:#ccc}
    .body{font-size:14px; background-color:#fff}
    &:hover:{background-color:#fff000}
}

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.