Sass @import and Partials

کد نویسی DRY

DRY مخفف کلمات Don't Repeat Yourself است. در اصطلاح کد نویسی به کدی که به صورت تمیز و بدون تکرارهای اضافی نوشته شود، DRY می‌گویند.

Sass کد CSS را به شکل DRY نگهداری می‌کند. یکی از راه‌های نوشتن کد به شکل DRY نگهداری کدهای مرتبط با هم در فایل‌های جداگانه است.

می‌توانید کدهای کوچکی در فایل‌های متفاوت ایجاد کنید و در صورت نیاز آن‌ها را در فایل Sass وارد کنید. نمونه چنین فایل‌هایی می‌تواند شامل فایل‌های reset, variables, colors, fonts و .... باشد.

import@

به مانند CSS فایل Sass هم از دستور @import پشتیبانی می‌کند. این دستور امکان وارد کردن محتوای یک فایل را به فایل دیگر فراهم می‌کند.

@import در CSS به دلیل مشکلات اجرایی زیاد استفاده نمی‌شود؛ هر بار با فراخوانی آن یک درخواست Http اضافه را ایجاد می‌کند. در حالیکه در Sass می‌توان با استفاده از آن محتویات یک فایل را در فایل CSS مورد نظر وارد کرد، بدون ایجاد درخواست Http در زمان اجرا.


                  @import filename;

نکته: لازم نیست پسوند فایل را وارد کنید. زیرا به صورت اتوماتیک انتظار یک فایل Sass یا CSS را دارد.

می‌توانید هر تعداد فایل که مد نظرتان است را وارد کنید:


                  @import "variables"; 

                  @import "colors"; 

                  @import "reset";

فرض کنید یک فایل reset را به شکل زیر ایجاد کرده‌ایم.

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

حال می‌خواهیم این فایل را وارد یک فایل دیگر به اسم standard.scss کنیم. می‌توانیم به شکل زیر این کار را انجام دهیم. معمولاً رایج است که @import را در بالای فایل استفاده کنند، زیرا از این طریق محتویات فایل وارد شده دارای قلمرو سراسری خواهند بود.

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

خروجی CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials

به صورت پیش‌فرض Sass همه فایل‌های scss. را به صورت مستقیم transpile می‌کند. این در حالی است که در زمان وارد کردن یک فایل، نمی‌خواهیم که آن فایل هم به صورت مستقیم transpile شود.

برای این کار در Sass مکانیزمی وجود دارد: اگر اسم فایل را با underscore شروع کنید، Sass آن فایل را transpile نمی‌کند. چنین فایل‌هایی را partial می‌نامند.

بنابراین یک فایل partial فایلی است که اسم آن با یک underscore آغاز شود.

_filename.scss

برای مثال در زیر یک فایل partial به اسم colors.scss_ ایجاد کرده‌ایم، که این فایل به صورت مستقیم transpile نمی‌شود. به این معنی که فایل colors.css را نخواهیم داشت.


                  $myPink: #EE82EE; 

                  $myBlue: #4169E1;

                  $myGreen: #8FBC8F;

حال برای وارد کردن این فایل، علامت underscore را حذف کنید. Sass متوجه خواهد شد که باید فایل colors.scss_ را وارد کند.

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

<< مبحث قبلی مبحث بعدی >>