استفاده از دستورات sass به صورت تو در تو (nesting)

نوشتن دستورات css یه صورت تو در تو توسط SASS

نوشتن دستورات و استایل های css توسط دستورات sass به صورت تو در تو کار بسیار ساده ای هست. به عنوان مثال فرض کنید که تگ های HTML زیر را داریم :

<div class="nesting">
    <a>
        <span>
            myText
        </span>
    </a>
</div>

خب حالا اگر بخواهیم به این تگ های استایل بدیم می تونیم در CSs به صورت زیر عمل کنیم :

.nesting a {
   font-size:13px;
}

.nesting a span {
   color:red;
}

در دستورات بالا توسط دستورات css ساده به تگ a و تگ span که درون تگ div هستند استایل دادیم. اما اگر بخواهیم همین کار رو توسط sass انجام بدیم میتونیم به صورت زیر عمل کنیم :

$a-width: 100px;
$a-height : 80px;
$myFontSize:15px;
$myBackColor:green;

.nesting{
    display: flex;
    justify-content:center;
    align-items:center;

    a{
        width:$a-width;
        height:$a-height;
        background-color:$myBackColor;

        span{
            font-size:$myFontSize;
        }
    }
}