آموزش SASS

دوره های مرتبط با این مقاله

SASSچیست؟

SASS مخفف Syntactically Awesome Style Sheets می باشد و یک زبان پیش پردازنده CSS یا CSS Preprocessor Language به حساب می آید. SASS اساسا یک روش توسعه یافته از کدنویسی در CSS همراه با سینتکس به حساب می آید.

تعدادی از تصورات غلط از SASS برای افرادی که اصلا از آن استفاده نکرده اند وجود دارد. یکی از آن تصورات غلط این است که آیا SASS جایگزین CSS می باشد؟ در پاسخ به این سوال باید گفت خیر ، جواب منفی می باشد ، SASS جایگزین CSS نمی باشد بلکه یک روش برای کوتاه تر نویسی CSS می باشد که در نهایت بعد از کامپایل شدن به همان CSS تبدیل می شود.

تبدیل SASS به CSS :

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

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

برای کامپایل یا تبدیل SASS به CSS می توانید با استفاده از Ruby و نصب SASS روی آن و یا نرم افزارهایی همچون Prepress این کار را به صورت لحظه به لحظه و یا به یکباره انجام داد.

چرا باید از SASS استفاده کرد؟

اگر شما با برنامه نویسان کامپیوتری در مورد کدنویسی front-end صحبت کرده اید آن ها به شما گفته اند که HTML و CSS زبان احمقانه ایست چون کدهای آن از پیش از تعریف شده است و بارها و بارها تکرار می شود ، حقیقت این است که آن ها در این مورد نصف شما حق دارند.

زبان های برنامه نویسی همچون C++ دارای یک مفهوم رایج به نام DRY یا ( Don’t Repeat Yourself ) مواجه هستند و نمی توانند همچون طراحان front-end کدهای زیادی را کپی کنند. آن ها با مفاهیم ساختی همچون تعریف توابع و … رو به رو هستند.

اما این دلیل نمی شود که شما در برابر دوستان برنامه نویس خود سرخورده شوید اینجا است که SASS به کار می آید.

شما می توانید با استفاده از سینتکس ها و نوشتن توابع سرعت و قدرت خود را در کدنویسی front-end افزایش دهید و هم به دوستان برنامه نویس خود بگویید که کد نویسی front-end آن چنان که فکر می کنند بد نیست.

شباهت های SASS و LESS:

  1. کلاس ها (Class)
  2. پارامتر ها .
  3. قانون کلاس های تو در تو که باعث میشود از کد های تکراری جلوگیری شود.
  4. توابعی که باعث میشه بتونیم از محاسبات ریاضی در CSS استفاده کنیم.
  5. تابع هایی برای رنگ ها که باعث میشود بهتر رنگ ها را انتخاب کنید.
  6. قابلیتی که باعث میشد گروهی از استایل ها را فراخوانی کنید.
  7. Scope: قابلیتی که باعث میشود استایل هایتان را به صورت local مدیریت کنید.
  8. ارزیابی هایی از جاوا اسکریپت که باعث میشود آن را در طراحی سایتتان استفاده کنید.

تفاوتهای SASS و LESS:

مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان کلاینت - ساید (client-side) و در طرفی دیگر SASS فقط روی Ruby اجرا میشود و زبان سمت سرور یا (Server-side) است.

خیلی از توسعه دهنده ها ممکن است از LESS استفاده نکنند چون همانطور که گفته شد LESS یک library جاوااسکریپت است و ممکن است که کاربر جاوااسکریپت را غیر فعال کند ولی SASS چنین مشکلی ندارد .

چند راه حل برای LESS وجود دارد،یکی از راه ها این است که LESS را فقط در حین روند توسعه (Development) استفاده کنید و بعد از این که کارتان تمام شد آن را به صورت یک خروجی CSS تبدیل کنید و بعد آن را توسط یک برنامه minifier به صورت خلاصه و پشت سر هم تبدیل کنید و آن را درون یک فایل جدا CSS بریزید تا به جای فایل های LESS استفاده شوند و یا از برنامه LESS.app استفاده کنید.

با این کارها، دیگه کاربر نیازی به فعال بودن java-script بر روی مرورگرش نداره.یکی از خوبی های SASS این است که نیازی نیست آن را به صورت جدا درون فایل CSS بریزید و برای اینکه آن را روی سرور بذارید میتوانید به صورت مستقل اینکار را بکنید و یا فایل CSS را با آن قاطی کنید ولی برای آنکه آن را اجرا کنید باید Ruby را نصب کنید و سپس SASS را نصب کنید .

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .