جلسه ۱۳ : آموزش کار با استایل های خروجی در Sass

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربران و علاقمندان به دوره آموزش Sass. در جلسه گذشته با دستورالعمل های تابع در این زبان برنامه نویسی آشنا شدیم و کار با آن را آموختیم. در این جلسه قرار است در کنار هم آموزش کار با استایل های خروجی در Sass را دنبال نماییم.

آموزش کار با استایل های خروجی در Sass

در این جلسه ما مطالب مفیدی را راجع به استایل های خروجی در sass خواهیم آموخت.
فایل CSS که SASS را تولید می نماید خود شامل استایل های پیش فرض CSS است که بر ساختار سند تاثیر می گذارد.
اگرچه استایل سازی های پیش فرض CSS بسیار کارگشا اند اما استفاده از آن ها در همه حال مناسب نیست.
این جا است که SASS وارد میدان می شود.
SASS از این جهت می تواند پیش گام باشد که از بسیاری از استایل های دیگر پشتیبانی می کند.

این استایل های مختلف، خروجی های متفاوتی را نیز ایجاد می نمایند:

استایل تو در تو (nested)

استایل Nested یا استایل تو در تو استایل پیش فرض SASS است.
این استایل هنگام کار با فایل های CSS بسیار بزرگ می تواند به راستی مفید واقع شود.
این استایل باعث می شود ساختار پرونده بیشتر قابل خواندن و قابل فهم شود.
در استایل تو در تو هر ویژگی از خط مربوط به خودش بهره می گیرد و هر فرورفتگی یا indentation نقشی مبتنی بر عمق استایل دارد.
برای مثال می توان کد زیر را در فایل SASS به صورت تو در تو همان طور که در زیر می بینید جایگذاری کرد.

استایل گسترده

در استایل گسترده CSS، هر ویژگی و قاعده خط مربوط به خودش را دارد.
این استایل به نسبت با استایل تو در تو فضای بیشتری را اشغال می نماید.
قسمت قواعد در این استایل شامل ویژگی ها properties می شود که همه در قواعد در نظر گرفته شده اند اما بهتر است بدانید که قواعد از هیچ گونه تورفتگی ای indentation پیروی نمی نمایند.
برای مثال می توان کد را در فایل SASS به شکل زیر گسترده کرد.

در ادامه آموزش کار با استایل های خروجی در Sass به استایل فشرده خواهیم پرداخت.

استایل به هم پیوسته

استایل به هم پیوسته CSS به نسبت استایل های گسترده و استایل تو در تو فضای کمی را به خود اختصاص می دهد.
این استایل بیشتر از ویژگی ها properties بر روی سنجشگرها متمرکزند.
هر سنجشگر یک خط را به خود اختصاص می دهد و هر ویژگی سنجشگر نیز در همان خط قرار می گیرد.
قواعد تو در تو Nested rules در کنار هم قرار دارند و نیاز به قرار گیری در یک newline را ندارند اما گروه های مجزای قواعد دارای یک newline در بین آن ها هستند.
در مثال زیر می توانید ببینید که چطور کد را در فایل SASS به شکل به هم پیوسته در آورده ایم.

استایل فشرده

استایل فشرده به نسبت چهار استایل معرفی شده قبلی کمترین فضا را اشغال می نماید.
این استایل از فضاهای سفید whitespaces برای جداسازی سنجشگرها و newline ها در انتهای فایل ها استفاده می نماید؛ به همین دلیل است که این استایل کمی گیج کننده و ناخوانا به نظر می آید.
در مثال زیر می توانید ببینید که چطور کد را در فایل SASS فشرده می نماییم.

کلام آخر

در این جلسه به  آموزش کار با استایل های خروجی در Sass پرداختیم.
در جلسه بعد یعنی آخرین جلسه از دوره آموزشی Sass به آموزش گسترش Sass می پردازیم.
با پی وی لرن همراه باشید.

Fatal error: Uncaught Error: Call to a member function get_regular_price() on boolean in /home/pvlearni/domains/pvlearn.com/public_html/wp-content/themes/pvlearn/functions.php:392 Stack trace: #0 /home/pvlearni/domains/pvlearn.com/public_html/wp-content/themes/pvlearn/single-product.php(940): onSale() #1 /home/pvlearni/domains/pvlearn.com/public_html/wp-includes/template-loader.php(74): include('/home/pvlearni/...') #2 /home/pvlearni/domains/pvlearn.com/public_html/wp-blog-header.php(19): require_once('/home/pvlearni/...') #3 /home/pvlearni/domains/pvlearn.com/public_html/index.php(17): require('/home/pvlearni/...') #4 {main} thrown in /home/pvlearni/domains/pvlearn.com/public_html/wp-content/themes/pvlearn/functions.php on line 392