آموزش دستورات تو در تو و دستور import

در قسمت قبل از سری آموزش Sass به معرفی Sass پرداختیم و شیوه ی نصب و متغیرها در Sass را بررسی کردیم. دومین قسمت از آموزش Sass را با دستورات تو در تو یا nested در Sass آغاز می کنیم و سپس به مبحث import در Sass می پردازیم.

قوانین تو در تو در Sass

Sass این امکان را فراهم کرده است، تا سلکتورها یا انتخابگرهای CSS را به همان صورت HTML و تو در تو بکار ببرید. کد Sass زیر را مشاهده کنید:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

توجه کنید که در کد بالا، سلکتور ul، سلکتور li و سلکتور a در داخل سلکتور nav به صورت تو در تو قرار گرفته اند. در صورتی که در CSS قوانین به صورت یک به یک تعریف می شوند و به صورت تو در تو نیستند. کد CSS زیر را مشاهده کنید:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

به دلیل واضح تر و راحت تر شدن خواندن کد نسبت به CSS، در Sass می توانید قوانین تو در تو را بکار ببرید.

خواص تو در تو در Sass

بسیاری از خواص CSS پیشوند مشابهی دارند. برای نمونه می توان به font-family ،font-size ،font-weight و یا text-align ،text-transform ،text-overflow اشاره کرد. با استفاده از Sass می توانید این خواص را به صورت یک بلوک کد و یکجا مقداردهی کنید. کد Sass زیر ملاحظه کنید:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

ترانسپایلر کد Sass بالا را به کد نرمال CSS در پایین تبدیل می کند:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

import@ و partial ها در Sass

Sass کد CSS را خشک نگه می دارد. خشک نگه داشتن کد به معنای عدم تکرار آن است. یکی از راه های خشک نگه داشتن کد، نوشتن قسمت های مختلف آن در فایل های جداگانه است. شما می توانید فایل های کوچکی را با قطعه های css بسازید که شامل دیگر فایل های Sass شوند. برای نمونه می توان به فایل هایی نظیر reset file، فایل variables، فایل colors، فایل fonts، فایل fonts-szie و ... اشاره کرد.

ایمپورت کردن فایل های Sass

دقیقا مثل CSS، پیش پردازنده Sass نیز از دستور import@ پشتیبانی می کند. import@ موجب می شود تا محتوای یک فایل را در بقیه فایل ها نیز داشته باشید. در ضمن دستور import@ در CSS یک مشکل بزرگ و آن مشکل به کارایی این دستور مربوط می شود. در واقع در CSS با هر بار فراخوانی این دستور یک درخواست Http اجرا می گردد اما در Sass بدین گونه نیست. شما در Sass با استفاده از دستور import@ کد فایل مربوطه را وارد فایل دیگر CSS می کنید و دیگر درخواست جدیدی نخواهید داشت تا موجب ضعف کارایی شود. ساختار دستور import در Sass به صورت زیر است:

@import filename;

نکته: در ساختار بالا شما نیاز ندارید از پسوند خاصی بعد نام فایل استفاده کنید زیرا Sass به صورت پیش فرض در نظر می گیرد که آن فایل یک فایل با پسوند sass. یا scss. می باشد. همچنین می توانید فایل های CSS را ایمپورت کنید. دستور import@ می تواند هر فایل و متغیر و mixin هایی را که در فایل ایمپورت شده تعریف شده اند، در فایل اصلی ایمپورت کند و از آن ها استفاده کند.

شما می توانید هر تعداد فایلی که نیاز داشتید، وارد فایل اصلی کنید:

@import "variables";
@import "colors";
@import "reset";

اکنون مثالی را در نظر می گیریم. بیایید فرض کنید که فایلی با نام "reset.scss" با محتویات کد زیر داریم:

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

حالا می خواهیم فایل "reset.scss" را داخل فایل دیگری که به آن "standard.scss" می گوییم، ایمپورت کنیم.

کاری که انجام می دهیم بدین صورت است: خیلی ساده دستور import@ را در بالای فایل standard.scss وارد می کنیم. با این کار محتوای آن در حالت سراسری یا global قرار می گیرد. کد Sass زیر را مشاهده کنید:

@import "reset";

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

حالا وقتی فایل standard ترانسپایل شد، کد زیر را در خروجی خواهیم داشت:

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

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

Partial ها در Sass

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

Sass مکانیزمی را در این شرایط درنظر گرفته است: اگر شما نام یک فایل را با یک آندرلاین (_) آغاز کنید، Sass آن فایل را Transpile نمی کند. فایل هایی که به این شیوه نامگذاری گردند، Partial می نامند. ساختار زیر را از یک فایل Sass Partial مشاهده می کنید که مستقیما ترانسپایل نمی گردد:

 _filename;

کد مثال زیر یک فایل Partial با عنوان "colors.scss_" را نشان می دهد:

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

حالا اگر یک فایل partial را ایمپورت کنید، باید (_) را از ابتدای آن حذف کنید. Sass خود درک می کند که یک فایل Partial با عنوان "colors_scss_" ایمپورت شده است. کد زیر این رویه را نشان می دهد:

@import "colors";

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