استایل دادن درختی در sass یا nesting در sass

هدف وبلاگ

در این وبلاگ از شرکت برنامه نویسی وارنا قصد داریم که به یکی از مهم ترین کاربرد های sass در برنامه نویسی بپردازیم یعنی استایل دادن درختی و توضیح بدهیم که استایل دادن درختی یعنی چی ، چه کاربرد هایی دارد و شما به چه شکلی میتوانید از آن استفاده کنید پس این محتوای آموزشی sass را از دست ندهید

مطالعه کنید : آموزش نصب sass

مطالعه کنید : تفاوت sass با scss چیست؟

استفاده از sass در حالت عادی

در وبلاگ های آموزشی قبلی ما راجب متغیر ها در sass توضیح دادیم و نحوه کارکرد اون ها رو به شما نشون دادیم و مثال هایی رو برای شما بیان کردیم که شما میتونید در لینک زیر وارد بشید و آموزش متغیر ها در sass رو دوباره بررسی کنید

مطالعه کنید : تعریف متغیر در sass

اما اگه حوصله ندارید اشکالی نداره در همین وبلاگ مثالی از متغیر ها در sass و نحوه نوشتن اون ها طبق قوانین سبک در sass رو برای شما بیان میکنیم. اما قوانین سبک در sass یعنی چی؟ شما به عنوان یک برنامه نویسی زمانی که در حال توسعه برنامه نوشته شده خود از طریق sass هستید از یک سری قوانین نوشتاری برای برنامه خود استفاده میکنید تا با استفاده از آن قوانین سیستم برنامه نوشته شده شما رو تحلیل کنه و خروجی ای که شما میخواستید رو بهتون نشون بده و این موضوع رو به عنوان شخصی که برنامه نویسی محسوب میشه ، میدونید که هر زبان برنامه نویسی یا کتابخونه یا فریم ورک برنامه نویسی ای از یک سری قوانین پیروی میکنه و ما به این قوانین که بر حسب زبان برنامه نویسی یا کتابخونه یا فریم ورک برنامه نویسی ای که انتخاب میکنیم تا به واسطه آن ها بتوانیم برنامه خود را توسعه بدیم قوانین سبک نوشتاری برنامه نویسی میگوییم.
اما حالا بریم سراغ یک مثال برای تعریف متغیر در sass در مثال زیر 4 متغیر برای Font-family ، Color ، Font-size و Width تعریف کردیم:

      
        $myColor
        ":red;"
        $myFontSize
        ": "
        18px
        "; "
        $myWidth
        ": "
        680px
        "; "
        body
        " { "
        font-family
        ": "
        $myFont
        "; "
        font-size
        ": "
        $myFontSize
        "; "
        color
        ": "
        $myColor
        "; } "
        #container
        " { "
        width
        ": "
        $myWidth
        "; } "
      
    

از آنجایی که نحوه تعریف متغیر در sass در وبلاگ های قبلی به صورت کامل توضیح داده شده قصد ما در این وبلاگ خروجی گرفتن از نحوه نمایش متغیر ها نیست بلکه ما این مثال را به شما نمایش دادیم تا برای شما نحوه نوشتن متغیر ها در sass یادآوری شود اما موضوع اصلی این آموزش چیست؟ موضوع اصلی این وبلاگ آموزشی این است که ما چطور میتوانیم به صورت بسیار راحت تری به المنت های خود استایل بدیم ؟ از اونجایی که sass وارد عمل شده تا کد نویسی را برای ما برنامه نویسی ها راحت تر کنه سبکی در استایل دهی ایجاد کرده به عنوان استایل دهی درختی یا در اصطلاح nesting . اما اینکه nesting چیه و چطور میتونیم از اون در برنامه نویسی خود استفاده کنیم رو در ادامه بهتون توضیح میدم.

nesting چیست ؟(استایل دادن درختی)

بهترین روش برای توضیح استایل دهی درختی در sass یا همون nesting اینه که با مثال بهتون توضیحش بدیم اما فقط این رو بهتون بگم که شما میتونید با استفاده از این سبک کد نویسی در sass همزمان درون یک المنت به المنت های دیگر هم استایل بدید :) میپرسید چطور ؟ مثال زیر ببینید تا بهتون توضیح بدم.

نحوه استفاده از کاربرد nesting در sass

فرض کنید کد زیر رو در برنامه html خود داشته باشیم:

    
      

        

          1
        
        

          2
        
        

          3
        
      
    
  

سعی کنید همین مثالی را که برای شما بیان کردم رو در فایل کد نویسی خود پیاده کنید و از طریق css به تمامی المنت های آن استایل بدید حالا سوال من از شما اینه که از چه روشی برای استایل دهی به این المنت ها در css استفاده میکنید فکم از روش زیر کار رو انجام بدید درسته ؟

      
        ul li a span{}
      
  

اگر از این روش استفاده میکردید باید به شما بگم که دیگه واقعا از این روش استفاده نکنید شما میتونید از طریق sass به تمامی این المنت ها به صورت درختی درون هم استایل بدید و خیلی راحت تر برنامه نویسی خودتون رو انجام بدید به روش کد نویسی زیر دقت کنید :

      
        ul {
          list-style: none !important;
          li {
            background: red;
            width: 200px;
            a {
              background: green;
              padding: 5px;
              span {
                color: red;
              }
            }
          }
        }
      
  

بررسی مزایای nesting در sass

حالا به نحوه کد نویسی بالا که در sass انجام شد دقت کنید ، ما چهار المنت تحت عنوان های ul , li , a , span داشتیم و به هر چهار مورد به ترتیب استایل های خاصی رو درون هم دادیم . به این نحوه کد نویسی که به المنت های مختلف درون یکدیگر استایل بتونیم استایل بدیم nesting در sass یا استایل دهی درختی میگوییم از جمله مزایای آن هم این است که ما همزمان به همه المنت ها در یک بخش توانستیم استایل بدیم و این روند باعث میشود که برنامه نویسی برای ما بسیار ساده تر شود و سرعت برنامه نویسی ما و دسترسی به کد ها را نیز برای ما بسیار آسان میکند اما باید به این نکته توجه داشته باشید که استفاده از این سبک کد نویسی ها یک سری نکات هم دارند و شما نمیتوانید بی وقفه به این سبک کد نویسی کنید چرا که هر چه مقدار بیشتری به صورت درختی کد نویسی کنید و از nesting در sass استفاده کنید حجم پهنای باند بیشتری در css برای شما اشغال میشود و مرورگر برای رندر کردن فایل برنامه نویسی شما باید کار بیشتری انجام دهد تا بتواند کد های نوشته شده شما را تحلیل و نمایش دهد برای همین باید بدانید که در چه موقع نیاز است که از nesting در sass استفاده کنید تا برنامه ای پر سرعت بنویسید شرکت برنامه نویسی وارنا در دوره ای جامع و تخصصی صفر تا صد sass را به شما آموزش میدهد و شما با پشت سر گذاشتن این دوره آموزشی میتوانید به بهترین شکل ممکن از sass استفاده کنید

مطالعه کنید : sass چیست ؟ کاربرد های sass