آموزش Sass : جلسه‌ی نخست، نصب و راه‌اندازی اولیه

طراحی سایت با استفاده از Sass

Sass یک زبان Preprocessor برای CSS و طراحی سایت یا طراحی وب است. با Sass شما توانایی استفاده از متغیرها (variables) ، قوانین تودرتو (nested rules) ، توابع (mixins) ، واردات درون خطی (inline imports) و … را دارید و تمام اینها کاملا با قوائد css سازگار است. Sass، style های وب را به خوبی سازمان می دهد و سرعت کد نویسی با نوشتن کدهای کمتر مخصوصا به کمک کتابخانه های معروف Sass نظیر Compass به حد مطلوبی افزایش پیدا می کند.

ویژگی ها

• • با CSS سازگار است
  • افزودنی های برنامه نویسی نظیر متغیرها ، تودرتویی ، توابع و …
  • توابع کاربردی برای دستکاری (تغییر) در رنگها و دیگر مقادیر
  • ویژگی های پیشرفته نظیردستورات کنترل (if …)
  • ساختار دستوری مناسبتر و خروجی قابل برنامه ریزی

سینتکس Sass

دو نوع Syntax برای SASS وجود دارد . شیوه قدیمی تر که با اختصار Sass و شیوه جدیدتر که با اختصار Scss شناخته می شود. من در این سری از آموزشها شیوه جدیدتر یعنی Scss را انتخاب کردم تا با آن آشنا شویم.

نصب و راه اندازی Sass بر روی ویندوز

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

اولین قدم نصب Ruby بر روی ویندوز است. برای دانلود فایل نصبی Ruby –اینجا– نسخه سازگار با سیستم عامل خود را دانلود و نصب نمایید.

پس از نصب Ruby زمان نصب Sass فرا می رسد. پنجره CMD را باز کنید و دستور زیر را در آن وارد نمایید (اتصال به اینترنت لازم است.)

Gem install sass

تا اتمام مراحل نصب Sass و وابستگی های آن شکیبا باشید.

پس از نصب Sass باید یک Scss File Watcher راه اندازی کنید. با راه اندازی این ابزار با هر تغییر فایل Scss شما کامپایل می شود و فایل Css خروجی به روز می گردد. به این منظور در CMD وارد مسیر فایل Scss خود می شوید و سپس دستور زیر را وارد نمایید :

Sass --watch input.scss:output.css

Input.scss : نام فایل scss ورودی است.

Output.css: نام فایل کامپایل شده CSS خروجی است.

در صورتی که یک پوشه حاوی scss های بسیار دارید بصورت زیر دستور را تغییر دهید.

sass --watch app/sass:public/stylesheets

public/stylesheets : مسیر فایل های scss است.

تا زمان اتمام کار بر روی فایل های Scss باید پنجره CMD را باز نگه دارید. در صورت بسته شدن Cmd یک بار دیگر File watcher را راه اندازی نمایید.

نصب و راه اندازی Sass انجام شد . در آموزش بعدی به فراگیری Syntax و دستورات Scss می پردازیم.