قواعد تو در تو (Nested Rules)، در LESS
در این کلید آموزشی قصد داریم که قواعد تو در تو (Nested Rules) در LESS را بر اساس یک مثال توضیح دهیم.
فرض کنید که قصد داریم کدهای CSS زیر را توسط کدهای LESS تولید کنیم :
در کد CSS بالا، مشخصه هایی برای تگ p و تگ h1 نوشته شده است.
مشخصه زیر برای هر دو تگ p و h1 به صورت یکسان ذکر شده است :
و مشخصه زیر تنها برای تگ h1 ذکر شده است :
کد CSS قبلی را به صورت زیر نیز می توانیم بنویسیم :
حال قصد داریم کدهای LESS را به گونه ای بنویسیم که نیاز به تکرار کردن مشخصه مشترک بین دو تگ p و h1 نباشد و همچنین در مواردی که تگ ها زیاد بوده و مشخصه های متعددی دارند، بتوانیم به شکل قابل درک تری، تگ ها و مشخصه های متناظر با آنها و مشترک بین آنها را تعریف نماییم (چون با توجه به نکته ای که ذکر شد، ممکن است گفته شود که همان شکل دوم، مختصر و مناسب است، اما در پاسخ باید گفت که برای مواردی که تعداد تگ ها و مشخصه ها زیادتر است، مرور کدهای آن شکل دوم، سخت تر می باشد و راه حلی که در ادامه گفته می شود، کار را بسیار ساده تر می کند و دید وسیع تری نیز هنگام کدنویسی خواهیم داشت).
برای این منظور، از قواعد تو در تو (Nested Rules) در LESS استفاده می کنیم. بر اساس قواعد تو در تو (Nested Rules)، می توانیم مشخصه های ذکر شده برای یک تگ (یا کلاس یا id یا ...) را برای یک تگ (یا کلاس یا id یا ...) دیگر نیز ذکر نماییم (بدون نیاز به نوشتن دوباره آن مشخصه ها).
یعنی کدهای LESS به صورت زیر نوشته می شوند :
در کد LESS بالا، از قواعد تو در تو (Nested Rules) استفاده شده است، به این معنی که چون مشخصه width تنها در زیرشاخه تگ h1 قرار گرفته، تنها برای تگ h1 می باشد، اما مشخصه color که هم در زیرشاخه تگ p و هم در زیرشاخه تگ h1 قرار گرفته است، برای هر دوی آنها ذکر خواهد شد.
بنابراین اگر کدهای LESS مورد نظر را پردازش کرده و به کدهای CSS تبدیل کنیم، آنگاه کدهای CSS زیر حاصل می شوند :
قواعد تو در تو (Nested Rules) در LESS ، برای نام تگ ها (Tag) و کلاس ها (Class) و id ها و ... قابل استفاده می باشد (نه فقط برای نام تگ ها).
اکنون یک مثال را بر اساس نام کلاس (Class) و id و تگ (Tag) ذکر می کنیم :
کدهای LESS زیر را می نویسیم :
با پردازش کدهای LESS ، کدهای CSS زیر به دست می آیند :
