همه چیز درباره Sass

مقدمه 
در این مقاله به بررسی کامل یکی دیگر از ابزارهای بسیار مهم و کاربردی در زبان CSS  می‌پردازیم که بسیار می‌تواند کار برنامه نویسیان و طراحان قالب ( فرانت اند کارها ) را ساده تر و حرفه ای تر کند. این ابزار بسیاری از نواقص CSS  را به صورت کاملا حرفه ای حل کرده است. به عنوان مثال در زبان CSS  ما این قابلیت را نداشتیم که از متغیرها و با توابع و یا وراثت و ... استفاده کنیم اما با ظهور Sass  این قابلیت ها به زبان CSS  اضافه شد و کار ما را برای استایل دهی راحت تر کرد. پس با من در این مقاله همراه باشید تا بیشتر با این ابزار بسیار قدرتمند آشنا شویم.

Sass چیست؟
Sass مخفف Syntactically Awesome Stylesheets یک زبان پیش پردازنده ای می باشد که در سال 2006 توسط Hampton Catlin طراحی گردید.Sass  بعنوان یک ابزار مربوط به زبان CSS کار با CSS را حرفه ای تر می کند.Sass  بیش از پانزده سال هست که توسط برنامه نویسان و طراحان آن توسعه داده می شود و پشتیبانی می شود و با وجود گذشت بیش از پانزده سال همچنان از محبوبیت و کاربرد بالایی برخوردار هست.

 Hampton Catlin- خالق زبان Sass

زبان پیش پردازنده چیست؟

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

Sass چگونه کار می کند؟

Sass نمی تواند کدهای نوشته شده با این زبان را مستقیما به مرورگر ارسال کند، زیرا کدهای نوشته شده با این زبان روی مرورگرها قابل اجرا نیستند. در واقع به بیان ساده تر مرورگرها از کدهای نوشته شده به زبان Sass پشتیبانی نمی کنند و آن کدها را نمی فهمند. بنابراین توسط فرآیندی که به آن Transpiling گفته می شود کدهای آن ترجمه می شود تا قابلیت سازگاری با مرورگر را داشته باشد.

چرا باید از Sass استفاده کنیم؟

چون زبان های Html و CSS زبان های اسکریپتی هستند و قابلیت کار با متغیرها و دیگر مباحث زبان های برنامه نویسی از جمله عملیات های محاسباتی و منطقی را ندارند، برنامه نویس از Sass استفاده می کند تا قابلیت های موجود در زبان های برنامه نویسی از جمله تعریف متغیرها و... در CSS فراهم شود.

در واقع Sass حکم یک زبان برنامه نویسی برای زبان CSS را دارد تا با فراهم نمودن برخی امکانات موجود در زبان های برنامه نویسی ضعف های زبان CSS را پوشش دهد و برطرف کند و به CSS بهبود ببخشد.

آیا یادگیری Sass سخت هست؟

اگر که در CSS مبتدی هستید یادگیری Sass کمی سخت بنظر می رسد ولی درصورتی که CSS را به خوبی یاد گرفته باشید مشکلی در یادگیری Sass نخواهید داشت به علاوه منابع مناسب و مفیدی برای یادگیری Sass در وب وجود دارد که مهمترین آن سایت داکیومنت Sass به آدرس www.Sass-Lang.com در دسترس کاربران و برنامه نویسان می باشد

آیا یادگیری Sass ضروری است؟

برای یک طراح حرفه ای یادگیری Sass ضروری است ولی اگر می خواهید حرفه ای نباشید و با ساده ترین امکانات وب سایت خود را پیاده سازی کنید می توانید از Sass استفاده نکنید

Sass را از کجا باید یاد بگیریم؟

وب سایت آرتور از آنجا که از اهمیت ابزار Sass در طراحی حرفه ای قالب به صورت کامل مطلع است. دوره ای را با همین نام در وب سایت آرتور قرار داده است که به صورت کامل و حرفه ای این ابزار قدرتمند را مورد برسی قرار داده و به صورت کامل هر آنچیزی را که یک توسعه دهنده رابط کاربری از این ابزار باید بداند را به صورت کامل آموزش دادیم برای شرکت در این دوره تنها کافی است از طریق لینک زیر وارد صفحه مربوط به دوره شده و در این دوره رایگان و پروژه محور شرکت نمایید.

دوره آموزش رایگان و پروژه محور Sass

پیش نیازهای یادگیری Sass چیست؟

اگر درک درستی از CSS داشته باشید می توانید شروع به یادگیری Sass کنید بنابراین پیش نیازهای یادگیری Sass زبان های Html و به خصوص CSS می باشد.

دوره های پیشنیاز Sass

آموزش پروژه محور HTML 5

دوره جامع و پروژه محور CSS 3

محبوبیت Sass

Sass نسبت به دیگر زبان های پیش پردازنده دارای ویژگی ها و امکانات بیشتری است و در حال حاضر قدرتمند ترین و محبوب ترین زبان پیش پردازنده CSS در جهان هست و به دلیل محبوبیت بسیار بالا به زبان Less که رقیب قدرتمند Sass محسوب می شود نیز قدرتمند تر و محبوب تر می باشد

Sass یا Less ؟

Less نیز همانند Sass یک زبان اسکریپتی مشابه می باشد که رقیب Sass محسوب می شود ولی بدلیل عمومی تر بودن Sass برنامه نویسان بیشتر از Sass استفاده می کنند و Sass را به Less ترجیح می دهند.

البته ناگفته نماند که برخی تفاوت های جزیی بین این دو وجود دارد از جمله اینکه Sass یک زبان اسکریپتی CSS محسوب می شود در حالیکه Less یک کتابخانه جاوا اسکریپت محسوب می شود

و تفاوت دیگری که این دو با هم دارند این هست که Sass یک زبان سمت سرور می باشد در حالیکه Less یک زبان سمت کلاینت می باشد

تفاوت Sass با Scss چیست؟

Scss در واقع نسخه ای ساخته شده و توسعه یافته از همان Sass می باشد. بنابراین تفاوت چندانی با هم ندارند. در واقع Scss نسخه ای توسعه یافته از نسخه 3 sass می باشد و نسبت به Sass ساختار بسیار آسان تری دارد. با این حال Sass محبوب ترین و بهترین زبان پیش پردازنده CSS محسوب می شود و از محبوبیت بی نظیری برخوردار هست.

Sass چه امکاناتی را فراهم می کند؟

Sass امکاناتی از جمله تعریف متغیر در CSS، وراثت، تو در تو نویسی ( nesting )، توابع ( mixin ) ، حلقه ها  ( loop ) ، گزاره های شرطی و... را در CSS فراهم می کند.

با Sass می‌توان متغیرها را تعریف و مقداردهی نمود و از آن ها استفاده کرد، از ویژگی وراثت بهره برد و تودر تو نویسی را در CSS ممکن کرد

ویژگی ها و خصوصیات Sass در یک نگاه

- سازگاری با تمامی نسخه های CSS

- سازگاری با زبان های برنامه نویسی طراحی و توسعه سایت از جمله PHP ،ASP ،Ruby و...

- تکامل یافته

مزایای Sass

- رایگان می باشد

- بدلیل استفاده از کدهای کمتر استفاده از آن باعث صرفه جویی در زمان می شود و خوانایی برنامه را بهبود می بخشد

- دارای توابع زیاد و مفید برای دستکاری رنگ ها

- خروجی با فرمت قابل تنظیم

- مورد تایید صنعت و برنامه نویسان

- توسعه ی پایدار بدلیل پشتیبانی بروز تیم طراحی و توسعه Sass

- کاهش تکرار کدها بدلیل داشتن امکاناتی از جمله متغیرها،وراثت،تو در تو نویسی و...

معایب Sass

- عدم پیشتیبانی توسط مرورگر:

کدهای Sass توسط مرورگر درک و پشتیبانی نمی شوند بلکه با تبدیل شدن به CSS برای مرورگر قابل درک خواهند بود.

فریم ورک های توسعه داده شده با زبان Sass

Sass در عین حال که یک زبان پیش پردازنده محسوب می شود، در توسعه و طراحی بسیاری از فریمورک های معروف جهان نقش بسیار مهمی داشته است فریم ورک هایی از جمله BootStrap ،Compass ،Bourbon و Susy از جمله معروف ترین فریمورک های توسعه داده شده با Sass هستند.

متغیرها در Sass

قواعد تعریف متغیرها در Sass از قواعد نام گذاری در سی شارپ پیروی می کنند و با $ تعریف می شوند

مثلا #777:color$ یک متغیر در Sass محسوب می شود

کامنت ها در Sass

کامنت ها در Sass با / / تعریف می شوند.دقیقا مانند تعریف کامنت در زبان برنامه نویسی سی شارپ و برای کامنت های چند خطی از /*  */ استفاده می شود

نصب Sass

برای نصب Sass بدلیل سازگاری با زبان های Ruby،Go و Node js سه روش وجود دارد که بیشتر از دو روش استفاده می شود:

روش اول

- نصب از طریق زبان برنامه نویسی روبی

روبی یک زبان برنامه نویسی شئ گرا و سطح بالاست که در سال 1995 توسط یوکیهیرو ماتسوموتو با نام اختصاری ماتزmattz)) برنامه نویس و دانمشند علوم کامپیوتر ژاپنی طراحی و توسعه گردید و در سال 2006 بعنوان بهترین زبان برنامه نویسی جهان از لحاظ سرعت پیشرفت و توسعه انتخاب گردید

در این روش،پیش نیاز نصب Sass نصب زبان برنامه نویسی روبی است.برای نصب Sass در ابتدا باید زبان برنامه نویسی Ruby (روبی) را روی سیستم خود نصب کنید.

برای نصب روبی می توانید از سایت www.ruby-lang.org اقدام به دانلود و نصب روبی کنید

سپس وارد Command prompt ویندوز(cmd) شده و دستور زیر را وارد می کنیم:

-gem install sass

و دکمه ی Enter را می زنیم

نصب Sass ممکن است چند دقیقه ای طول بکشد بنابراین از cmd خارج نشوید و صبر کنید تا فرایند نصب به اتمام برسد.

روش دوم

- نصب از طریق Node js

برای نصب با روش node js در ایتدا باید وارد وب سایت رسمی nodejs با آدرس https://nodejs.org/en/   شده و آن را دانلود کرده و بر روی سیستم خود نصب میکنیم.

 سپس cmd ویندوز را باز کرده و از طریق Cmd وارد دایرکتوری پروژه میشویم و با وارد کردن دستور زیر در مسیر پروژه Sass را بر روی پروژه خود اعمال میکنیم

npm I –g sass

با وارد کردن دستور بالا به صورت کامل Sass بر روی پروژه ما اعمال میشود.

نتیجه گیری

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

در یک کلام ابزار Sass نشان دهنده حرفه ای بودن شما در طراحی سایت و حوزه فرانت اند است.

منبع : وب سایت آموزش برنامه نویسی آرتور

گردآورنده : یاسر شریعتی