Importasyon ng @import at Partials ng Sass

Ang Sass ay maaring panatilihin ang CSS code na dry (DRYDon't Repeat Yourself, huwag muling magpaliwanag).

Ang isang paraan para sa pagpapatuloy ng DRY code ay ang pag-iimbak ng kaugnay na code sa hiwalay na file.

Maaari mong gamitin ang CSS fragment para gumawa ng maliit na file at ilagay sa ibang Sass file. Halimbawa, ang ganitong file ay maaaring maging: reset file, variable, color, font at iba pa.

Sass File Import

Tulad ng CSS, ang Sass ay sumusuporta sa @import Instruction.

@import Instruction ay nagbibigay ng kapahamakan na maglagay ng nilalaman ng isang file sa ibang file.

Dahil sa problema sa pagganap, ang CSS @import Instruction ay may pangunahing kahinaan; bawat pagtawag dito ay maglikha ng dagdag na HTTP request. Subalit, ang Sass @import Instruction na naglalagay ng file sa CSS; kaya hindi kailangan ng dagdag na HTTP request sa oras ng pagpapatok.

Sass Import Syntax:

@import filename;

Tip:Hindi mo kailangan magbigay ng file extension, ang Sass ay awtomatikong ipagpasiya na ikaw ay tumutukoy sa .sass o .scss file. Maaari mo ring importin ang CSS file.@import Instruction na nag-import ng file, pagkatapos ay maaaring gamitin ang anumang variable o mixin na nasa import na file sa pangunahing file.

Maaari mong importin ang anumang bilang ng file sa pangunahing file:

Instance

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

Hayaan nating tingnan ang isang halimbawa: ang iminumung file na "reset.scss" ay parang ito:

SCSS Syntax (reset.scss):

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

Ngayon ay magiging import namin ang file na "reset.scss" sa ibang file na may pangalan na "standard.scss".

Nagiging ganito kami: pangkaraniwan ay sa taas ng file na magdagdag ng @import Instruction; kaya ang nilalaman nito ay magiging global scope:

SCSS Syntax (standard.scss):

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

Kaya, kapag ang file na "standard.css" ay nag-convert, ang CSS ay magiging tulad nito:

CSS Output：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (local file)

Sa pangkaraniwan, ang Sass ay direktang nag-convert ng lahat ng .scss na file. Subalit, kapag nag-import ng file, hindi kailangan na direktang ma-convert ang file.

May isang mekanismo ang Sass: kung ikaw ay nagsisimula ng pangalan ng file ng bangkang, ang Sass ay hindi ito pag-interpret. Ang mga file na pinangalang ito ay tinatawag na partials sa Sass.

Kaya, ang partial Sass file ay pinangalanang may pangunahing underscore:

Grammar ng Sass Partial:

_filename;

Ang sumusunod na halimbawa ay nagpapakita ng partial Sass file na may pangalang "_colors.scss". (Ang file na ito ay hindi direktang nangangasiwa sa "colors.css"):

Instance

"_colors.scss":

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

Ngayon, kung ikaw ay mag-import ng partial file, huwag maisama ang underscore. Ang pag-unawa ng Sass ay dapat na i-import ang file "_colors.scss":

Instance

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