مهمترین مفاهیم SCSS،SASS و Preprocessor ها

این مقاله درمورد مهمترین مفاهیم SCSS،SASS و Preprocessor ها می باشدو تفاوت بین SASS و SCSS را بیان می کند.

سی اس اس به تنهایی برای طراحی صفحات وب بسیار مناسب می باشد.که شامل بسیاری از وظایف تکراری می باشد و زمانی که برنامه بسیار بزرگ باشد مدیریت استایل صفحات برایش دشوار می شود.برای جلوگیری از این وظایف تکراری و نوشتن CSS به بهترین روش،ما به یک Preprocessor نیاز داریم.

پروسسر ها  ،گسترش یافته ی CSS هستند.Preprocessorها تمامی ویژگی های CSS به همراه ویژگی های اضافه تر مانند متغیر،expression، mixin و... می باشند.یک Preprocessor از نظر کاربر نهایی کار بزرگی را انجام نمی دهد اما می تواند سریعتر و راحت تر توسعه پیدا کند.ازلحاظ عملکرد  از دید کاربر نهایی ، Preprocessor ها می توانند همه ی Style Sheet ها را به یک فایل واحد تبدیل کنند.بنابراین همه ی Style ها برای یک برنامه در یک شبکه رفت و برگشت(round-trip)  بارگذاری می شود به جای این که برای هر Style Sheet درخواست های جداگانه شود.

استایل ها با استفاده از تعدادی Preprocessor ها ایجاد شده اند که به CSS تبدیل می شوند(Convert)  و فایل کامپایل شده CSS در صفحه HTML می باشد، زیرا مرورگر CSS را میفهمد.

ما Preprocessor های معروفی مانند LESS,SASS,Stylus داریم. ما میخواهیم در مورد Sass بحث کنیم.

اما Sass چیست؟

سس(Sass) مخفف Syntactically awesome style sheets است. SASS ، قسمتی از Preprocessor دیگر به نام HAML می باشد.HAML توسط توسعه دهندگان Rubyنوشته شده است.از این رو، SASS ، قواعد Ruby را دنبال می کند و برای کامپایل فایل های SASS وCSS باید Ruby روی سیستم شما نصب شود.در نسخه سوم،Syntax آن مانند CSS شد و نام آن هم به   Sassy CSS یا SCSS تغییر یافت. از این رو ، این مقاله  به طور کلی درمورد Preprocessor ها و SCSS صحبت می کند.

مزایای Sass:

سس (Sass) برنامه ی شما را با جلوگیری از تکرار  وظایف ، براحتی نگهداری می کند . استفاده از ویژگی های اضافی مانند variable, expression, nesting, inheritance, mixins, partials  آن را بسیار راحت تر از CSS می کند.

سس (Sass)توابع کاربردی بسیاری را برای دستکاری کردن رنگ ها و دیگر متغیر ها فراهم می کند.

سس (Sass) ویژگی های پیشرفته ای مانند  control directiveبرای کتابخانه ها را فراهم میکند.

سس (Sass)به شما اجازه می دهد تا فایل کامپایل شده ی CSS را فرمت و سفارشی سازی کنید.

پیش نیاز (Requirement):

برای استفاده از SASS ، ابتدا ما باید Ruby را نصب کنیم.که این کار یک عمل راحتی می باشد.مطمئن شوید گزینه ی" Add Ruby executable to your PAT "  را در هنگام نصب تیک زده باشید که این کار باعث می شود که Ruby در کل برنامه در دسترس باشد.اگرچه امروزه editorهای زیادی (که شامل Visual studio 2013 Update 2 و نسخه های بالاتر نیز هستند ) وجود دارند که به صورت ذاتی و تعبیه شده ، پشتیبانی از SASS را انجام می دهند.

از این رو ، اگر شما نمی توانید Ruby را نصب کنید ، جایگزین های دیگری وجود دارد.

جم(Gem) به همراه Ruby  نصب می شود. Command Prompt را با Ruby باز کنید و SASS را با Gem بوسیله Command زیر نصب کنید. 

gem install sass

در صورت بروز هر خطا:

sudo gem install sass

برای تبدیل فایل های SCSS به فایل CSS:

 sass <sourcesassfilenamewithpath>.scss : <destinationcssfilenamewithpath>.css
 sass sassfiles /style.scss : stylesheets/style.css

مقایسه SASS و SCSS :

اس سی اس اس (Scss) نسخه سوم از SASS می باشد.که از نظر قواعدی باهم متفاوت هستند.

سس(SASS) :

کد SASS فشرده شده است، که به ساختارهای کلیدی کمتری نیاز دارد.ما به پرانتز و semicolon ها نیازی نداریم. فرورفتگی ها نقش مهمی را ایفا می کنند. از این رو، آن ها  برنامه نویسی را استاندارد می کنند .

اس سی اس اس (SCSS(Sassy CSS:

-گویاتر

-خواناتر

-یادگیری آسان

یکپارچه سازی آن با CSS آسان می باشد.شما می توانید به صورت مستقیم از کد CSS  پلاگین استفاده کنید.ابزارهای تبدیل CSS به SASS صددرصد صحیح نمی باشند.

آموزش کامل در آپارات

https://www.aparat.com/v/Q6GzU

#مصاحبه_شغلی #توسعه_وب #شمسی_پور_ابریشمی #شمسی_پور #ابریشمی