نصب کردن

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

چون sass  با استفاده از ruby  نوشته شده است شما باید ruby  را بر روی ویندوز خود نصب کنید بعد از اینکه این برنامه را دانلود کردید . در مرحله اول نصب پنجره ای شبیه به پنجره زیر برای شما نمایان میشود. دقت داشته باشید که در این مرحله شما باید تیک گزینه دوم را بزنید. و بعد بقیه مراحل را انجام دهید.

مرحله ۲- استفاده از خط فرمان command prompt  برای نصب sass

حال که نرم افزار ruby را نصب کردید، شما میتوانید به راحتی sass  را بر روی کامپیوتر خود نصب کنید. برای این کار command  خود را باز کنید . و خط زیر را در خط فرمان بنویسید.

gem install sass

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

برای اینکه شما بتوانید از تمام قابلیت های  sass استفاده کنید میتوانید در همین مرحله compass  را نیز نصب کنید.

gem install compass

با خط بالا هم sass  و هم compass به صورت همزمان نصب خواهد شد .

مرحله ۳- تنظیمات فایل sass

خوب تا اینجا ما sass  را روی سیستم خود نصب کرده ایم . حالا میتوانیم که فایل sass  خود را ایجاد کنیم . برای اینکه کدهایی که ما در sass  مینویسیم به صورت خودکار به فایل css کامپایل شود میتوانید در خط فرمان دستوری شبیه خط زیر را بنویسیم .

<sass –watch <YOUR_SASS_FILE>:<YOUR_CSS_FIL

برای مثال

sass –watch style.scss:style.css

در این صورت ما در فایلی با پسوند scss کد های خود را وارد میکنیم و به محض ذخیره کردن فایل خود فایل css ما ساخته می شود .

البته توجه داشته باشید خط فرمان شما باید بر روی پروژه خود قرار دهید ( با استفاده از دستور cd )

مثالی از کار با selector sass  و compass  :

 

 

 

 

 

 

 

 

 

فایل screen.sass:

 

 

 

 

 

 

 

 

 

 

تبدیل کد بالا به فرمت css:

 

 

 

 

 

 

 

 

 

 

 

 

 

مثالی که در آن به آموزش متغیرهاوتوابع built in و import کردن یک css درون sass.

 

 

 

 

 

 

 

فایل ie.sass  که قرار است در screen.sass مورد استفاده قرار بگیرد.

 

 

 

 

 

فایل screen.sass:

 

 

 

 

 

 

اسکرول به بالا