Merhaba, Bu konu içerisinde scss ve sass'ın css den farkını size bir örnekle aktarmak istiyorum.
SCSS ve SASS neden kullanılır?
Bir çok sistem/dil (PHP dahil) sass ve scss i tanımaz/okumaz, ama buna rağmen bu kadar popüler olmalarının nedeni yazan kişiye (yazılımcıya) kolaylık sağlamasından kaynaklanıyor. Örneğin bir proje içerisinden ulaşmak istediğiniz " mmo-text" adında bir input olsun. CSS de ve SCSS de buna nasıl ulaştığımıza bir bakalım.
SCSS ve SASS neden kullanılır?
Bir çok sistem/dil (PHP dahil) sass ve scss i tanımaz/okumaz, ama buna rağmen bu kadar popüler olmalarının nedeni yazan kişiye (yazılımcıya) kolaylık sağlamasından kaynaklanıyor. Örneğin bir proje içerisinden ulaşmak istediğiniz " mmo-text" adında bir input olsun. CSS de ve SCSS de buna nasıl ulaştığımıza bir bakalım.
HTML Kodu:
<div class="forum">
<div class="forum__icerik">
<input class="mmo-text" type="text"/>
<input class="mmo-number" type="number"/>
</div>
</div>
CSS:
.forum{
width:250px;
height:400px;
}
.forum .forum--icerik{
background-color:red;
text-align:center;
}
.forum .forum__icerik .mmo-text , .forum .forum__icerik .mmo-number{
font-weight:bold;
text-decoration:none;
}
SCSS:
.forum {
width: 250px;
height: 400px;
.forum--icerik {
background-color: red;
text-align: center;
}
.forum__icerik {
.mmo-text {
font-weight: bold;
text-decoration: none;
}
.mmo-number {
font-weight: bold;
text-decoration: none;
}
}
}
}
SASS:
.forum
width: 250px;
height: 400px;
.forum--icerik
background-color: red
text-align: center
.forum__icerik
.mmo-text
font-weight: bold
text-decoration: none
.mmo-number
font-weight: bold
text-decoration: none
