آموزش Sass - نصب و تنظیمات لازم برای استفاده از Sass

آموزش Sass – نصب و تنظیمات لازم برای استفاده از Sass

در مبحث حاضر نصب Ruby را به صورت گام به گام به شما آموزش داده و از آن برای اجرای فایل های SASS استفاده خواهیم کرد.

ابزار و سیستم مورد نیاز برای استفاده از SASS

• سیستم عامل – سازگار با چندین پلت فرم و محیط
• مرورگر وب – IE (8+)، Firefox، Google Chrome، Safari و Opera
• زبان برنامه نویسی - Ruby

نصب Ruby

گام اول – بر روی لینک https://www.ruby-lang.org/en/downloads/ کلیک نمایید. یک صفحه مانند زیر را پیشروی خود خواهید دید:

فایل zip و فشرده شده ی Current stable را دانلود نمایید.

گام دوم –روند setup و نصب زبان Ruby را بر روی دستگاه شخصی خود دنبال نمایید.

گام سوم – سپس، پوشه ی bin از Ruby را جهت فراخوانی و استفاده از دستورات gem در متغیرهای محلی PATH از user variable و system varaible اضافه نمایید.

تنظیم و مقداردهی متغیر PATH مربوط به کاربر خاص (PATH USER VARIABLE)

• بر روی آیکون My Computer راست کلیک کنید.
• گزینه ی Properties را انتخاب نمایید.
• سپس تب Advanced را باز کرده و بر روی دکمه ی Environment Variables کلیک نمایید.

داخل پنجره ی Environment Variables، بر روی متغیر PATH که در تصویر زیر نمایش داده شده، دابل کلیک نمایید:

یک کادر به نام Edit User Variable پدیدار می شود. آدرس پوشه ی bin از ruby را به این صورت C:\Ruby\bin داخل فیلد Variable value قرار دهید. چنانچه path و آدرس قرارگیری سایر فایل ها قبلا تنظیم شده، آنگاه یک نقطه ویرگول (;) درج کرده و سپس آدرس پوشه Ruby را مانند نمونه ی زیر اضافه نمایید.

بر روی دکمه ی OK کلیک نمایید.

تنظیم و مقداردهی متغیر PATH مربوط به تمامی کاربران (PATH System Variable)

• بر روی دکمه ی New کلیک نمایید.

کادر New System Variable مانند زیر نمایان می شود.

مقدار RubyOpt را در فیلد Variable name و مقدار rubygems را در فیلد Variable value وارد نمایید. پس از درج این مقادیر در فیلدهای مربوطه، بر روی OK کلیک نمایید.

گام چهارم – پنجره ی فرمان (Command prompt) را در سیستم خود باز کرده و سپس دستور زیر را در آن درج نمایید:

gem install sass

گام پنجم – پنجره ی زیر در پی نصب موفقیت آمیز SASS به نمایش در می آید.

مثال کاربردی

در زیر یک مثال ساده و کاربردی از زبان SASS را مشاهده می کنید.

< html >
  < head >
    < title > Import example of sass< /title >
    < link rel="stylesheet" type="text/css" href="style.css" / >
  < /head >
  < body >
    < h1 >Simple Example< /h1 >
    < h3 >Welcome to TutorialsPoint< /h3 >
  < /body >
< /html >

حال یک فایل به نام style.scss ایجاد می کنیم که حامل کد بالا بوده و بسیار شبیه به یک فایل CSS می باشد. تنها تفاوتی که مشاهده می شود در پسوند فایل است که با .scss ذخیره می شود. لازم به ذکر است که فایل های .htm و .scss هر دو بایستی در پوشه ی ruby\lib\sass\ ذخیره شوند (همچنین لازم است قبل از طی کردن این مسیر، یک پوشه به نام sass در پوشه ی lib تعریف کرده باشید).

h1{
   color: #AF80ED;
}
h3{
   color: #DE5E85;
}

شما می توانید با فراخوانی دستور زیر به SASS دستور دهید که بر روی فایل نظارت داشته و هرگاه که فایل SASS تغییر کرد، فایل CSS را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\style.scss:style.css

زمانی که دستور بالا را اجرا می کنید، یک فایل style.css به صورت خودکار ایجاد می شود. اکنون هر زمان که فایل SCSS را تغییر می دهید، متعاقبا فایل style.css نیز به صورت اتوماتیک اجرا می شود.

پس از اجرای دستور بالا، کد موجود در فایل style.css به صورت زیر ویرایش و بروز رسانی می شود.

style.css:
h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

حال مراحل زیر را طی کرده و خروجی کد بالا را در بستر مرورگر مشاهده می کنیم:

• کد بالا را در فایل hello.html ذخیره نمایید.
• فایل مزبور را با استفاده از یک مرورگر وب باز کنید. خروجی کد شما به صورت زیر به نمایش در می آید: