جونیورScssراه اندازی پیش پردازنده ساس Scss (CSS preprocessors)

راه اندازی پیش پردازنده ساس Scss (CSS preprocessors)

پیش پردازنده ساس که با زبان روبی توسعه داده شده است کمک میکند ما بتوانیم کد های css را بهتر و سریعتر و منظم تر از قبل بنویسیم. به عقیده شخصی ام پس از یادگیری بوتسترپ گزینه بعدی برای کار حرفه ای با css همین ساس است. (که یکی از css preprocessors محسوب میشود) در مقاله بعد با نشان دادن معجزه BEM در نامگذاری کلاس ها و فایل ها خواهیم گفت که چه مهشری در کدنویسی خوانا و کدنویسی تمیز و منظم به پا میشود. در این مقاله به نصب اولیه میپردازیم.

گام 1: نصب کردن زبان روبی با geminstaller

ساس با زبان روبی Ruby نوشته شده است. لذا قبل از کار با scss بایستی این زبان را از این لینک دانلود کنید. برای اطمینان از نصب موفق به ویندوز پاورشل بروید و gem install scss را وارد کنید. مطابق آنچه در ویدیو بالا مشاهده مینمایید. اگر ساس با موفقیت نصب شد و پیام success داده شد یعنی همه چیز دارد خوب پیش میرود.

کامند gem چیست؟ اگر با npm کار کرده باشید میدانید که یک پکیج منیجر هست برای نصب پکیج های Node.js ! اینجا برای نصب پکیج های زبان روبی از gem استفاده میکنیم!

گام 2: پوشه بندی اولیه

  1. یک فایل به نام index.html ایجاد کردیم و کدهای پیشفرض ان را ریختیم.
  2. حالا یک تگ h1 با کلاس hello ایجاد کردیم. بعدا میخواهیم این کلاس را در فایل style.scss بنویسیم. این فایل در پوشه sass قرار خواهد داشت و این پوشه در کنار index.html ایجاد خواهد شد.
  3. یک تگ link که ادرس href آن برابر css/style.css باشد ایجاد میکنیم. (مطابق ویدیو بالا)

گام 3: اولین پردازش ساس به سی اس اس (css preprocessors)

همانطور که میدانید فایل style.css هم اکنون وجود ندارد. قرار است بعد از کامپایل شدن style.scss به style.css تولید شود. معمولا در کنار آن یک فایل دیگر به نام style.map.css هم ایجاد میشود. برای کامپایل کردن از کامند زیر استفاده میکنیم:

scss sass/style.scss:css/style.css

ساختار نوشتاری خط بالا به این صورت است که ابتدا پکیج scss نوشته میشود (که قبلا با gem install scss نصبش کردیم). سپس ادرس فایل ساس و بعد دو نقطه و بعد ادرس فایل css که قرار است تولید شود.

گام بعدی: css preprocessors با BEM

در مقاله بعدی کمی پیشرفته تر میشویم و چند پوشه و فایل ایجاد میکنیم. مثلا میگوییم که نامگذاری فایل ها باید با اندرلاین شروع شود. اگر دوست دارید بدانید چرا پس با ما همراه شوید!