CSS استاندارد از تودرتوسازی پشتیبانی نمیکند. ما نمیتوانیم یک کلاس را درون کلاس دیگر بنویسیم. همان طور که پروژه بزرگتر میشود، این امر موجب مشکل خوانایی میشود و ساختار چندان جالب به نظر نمیرسد.
برای نمونه، تصور کنید یک منوی ناوبری با لینکهای قابل کلیک در HTML به صورت زیر تعریف میکنیم:
HTML از کد تو در تو پشتیبانی میکند. با این وجود بدون تو در تو سازی در CSS مانند زیر به نظر میرسد:
ما باید nav را برای همه تگها و حتی شبه کلاس anchor بنویسیم، چون nav تگ والد همه موارد است. با این وجود Sass از تودرتوسازی نیز پشتیبانی میکند:
در این حالت میتوانیم کد با ساختار بهتری مانند HTML داشته باشیم. لازم نیست که کلاس after را برای کلاس nav بنویسیم که از افزونگی نیز جلوگیری میکند.
نکته مهم: تودرتوسازی کلاسها با عمق بیش از 3 لایه توصیه نمیشود.