» • اولین چالش Scss خود را کد بزنید!

• اولین چالش Scss خود را کد بزنید!

همانطور که مستحضرید ساس ( یا همان scss ) یکی از پیش پردازنده ها ( preprocessor ) برای زبان کدنویسی CSS میباشد. حال ما میخواهیم در رابطه با آرایه ها و آبجکت هایش صحبت کنیم و بگوییم که در ساس (منشا ساس از زبان برنامه نویسی Ruby است) چگونه میتوان خیلی راحت تر کدهای css را با حلقه ها در چند خط نوشت بجای اینکه لازم باشد تمام صفحه خود را کدنویسی کنیم تا در نهایت چند المنت استایل بگیرند.

• پیشنیاز: نصب ساس روی سیستم

قبل از اینکه وارد مثال عملی بشویم باید عارض بشوم که روی سیستم شما به نصب ساس نیازمندیم. بدین

منظور به سایت ruby installer بروید و نرم افزار را دانلود کنید. پس از نصب به ترمینال به ترمینال ( Windows Powershell یا command promp ) بروید و با کد زیر, ورژن روبی نصب شده را جویا شوید:

gem -v

حالا باید ورژن را نشان دهد و شما متوجه میشوید که gem ( پکیج منیجر روبی) درست نصب شده و فرایند با موفقیت طی شده است. با استفاده از gem میخواهیم ساس را نصب کنیم. پس در همتن ترمینال قطعه کد زیر را وارد میکنیم:

gem install sass

مطلب مرتبط آموزش Communication در هوانوردی

•پیشنیاز: پوشه بندی

کافیست در دسکتاپ خود یک پوشه به نام دلخواه ایجاد کنید و داخلش یک دایرکتوری دیگر به نام scss و یک دایرکتوری هم به نام css ایجاد کنید. در کنار این ها فایل index.html خود را داشته باشید تا با ذکر مثال زیر گفته شود که چه کدی داخلش بریزید! حالا هم ساس نصب شد هم پوشه بندی انجام شد. سیستم آماده برای عملیات کدنویسی مثال زیر است.

• محتویات فایل scss

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

 $colors: 'red','blue','green','purple';


@each $x in $colors{
  .div--#{$x}{
    background-color: #{$x};
    height: 50px;
  }
}

نکته 1: در قطعه کد بالا یک ارایه به نام colors تعریف شده که علامت دلار نشان دهنده متغیر بودن ان است. مقادیر داخل این ارایه از قصد دقیقا همان مقادیری انتخاب شدند که در برگه html شاهد ان هستیم.

نکته2: کمی پایین تر در کدها مشاهده میکنید یک حلقه each که تمام المان های ارایه را فرامیخواند و برای هریک کلاسی تعریف میکند و داخل هر کلاس رنگ بک گراند به ان میدهد.

نکته 3: شاید مهم ترین نکته همین است! بیایید تست کنیم. بجای قطعه کدی که روبروی background-color نوشته شده فقط بنویسیم $x انگاه نتیجه را در برگ کامپایل شده یعنی style.css ببینید! این برگ در دایرکتوری css قرار گرفته است. همانطور که متوجه شدید یک استرینگ نشان داده و به جای red مثلا نوشته ‘red’ و همین موضوع باعث میشود رنگ خوانده نشود و نتیجه ای در بروزر نشان داده نشود.

محتویات برگه html

حالا در برگه html نیز این تگ های div با این کلاس ها موجود هستند:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Challenge</title>
  </head>
  <body>
    <div class="div--red"> </div>
    <div class="div--blue"> </div>
    <div class="div--green"> </div>
    <div class="div--purple"> </div>
  </body>
</html>

به ترمینال ( Windows Powershell یا command promp ) بروید و کد زیر را وارد کنید تا ساس در حالت watch قرار گیرد:

scss --watch
scss:css

• قطعه کد بالا اینگونه تفسیر میشود

کلمه scss دومی که پس از watch آمده به معنای آدرس ورودی است. پوشه ای که فایل های ساس در آن قرار میگیرند. پس از آن دو نقطه از کلمه css استفاده شده که به پوشه css یعنی خروجی ما (مکان ذخیره

کدهای کامپایل شده) اشاره میکند.

• مرحله نهایی

بنظرتان حالا که ساس کدهای ما را کامپایل کرد و به پوشه css ریخت چگونه باید از کدها استفاده کنیم؟ بله! نوبت آن رسیده که با ایجاد تگ link در بالای برگه html , آدرس آن را بدهیم تا برگه html ما آن را استفاده کند. یکبار دیگر به index.html بروید و روی آن دوبار کلیک کنید تا در بروزر نمایش داده شود. در آن چه میبینید؟ اگر تصویر زیر را میبینید یعنی کارتان درست است! تبریک! میتوانید کدها را از این لینک بصورت zip دانلود کنید!