Sass @import and Partials

Sass za a iya samun code na CSS a kai sauransu (DRY，Don't Repeat Yourself，kai sauransu.

Wannan ne wata sabon rarraba code don kewayi code na yau da kullun a fayil na kai tsaye.

An tabbatar da a iya amfani da CSS shafuka don kewayi fayil ke ci gaba. Misali, fayilon kewayi ana iya zama: fayilon nuna, wari, zane, fonalci, da sauransu.

Sass fayilon kewayi

Kamar CSS, Sass na da ci gaba da @import Amarna.

@import Amarna za a iya kewayi irinmu fayil a cikin fayil dake gaba ɗaya.

Daga sabon kwarewar aikata, CSS @import Amarna ita ce koyarwa: kai tsaye a kewayi ita za a tsara HTTP tashi kan kai tsaye. Amma, Sass @import Amarna za a kewayi fayil a cikin CSS; kuma ba a kewayi tashi HTTP kan wasu da kuma a lokacin aikata!

Yariki Sass kewayi:

@import filename;

Tuntuba:An ba ka tabbatar da a kewayi warefawa fayil, Sass za a iya gani kuma a fagen fagen. An tabbatar da a kewayi fayil CSS.@import Amarna yana kewayi fayil, kuma za a iya samun wanda za a iya amfani da shi a fagen fagen gaba ɗaya.

An tabbatar da a kewayi fayil da yau da kullun a fagen fagen.

Example

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

Ka yaƙi da wasan kwaikwayo: dace ne a halitta a da fayil mai suna "reset.scss" wanda yana gana kamar yadda:

Yariki SCSS (reset.scss):

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

Idan a ba a kewayi "reset.scss" fayil domin kewayi zuwa fayil mai suna "standard.scss".

Ana ya kewayi a wannan hali: kai tsaye a fagen fayil. @import Amarna; kuma irinmu yana da matsakaici gaba ɗaya:

Yariki SCSS (standard.scss):

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

Dahaba, idan "standard.css" fayil yana fadama, CSS yana gana kamar yadda:

CSS birayi:

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

Sass Partials (fayilon kuro)

Al'umma, Sass yana fadama duka kulli .scss fayil. Amma, idan a ba fayil a kan kewayi, ka'a ba ka fadama.

Sass has a mechanism: if you start the filename with an underscore, Sass will not transpile it. Files named in this way are called partials in Sass.

Therefore, partial Sass files are named with a leading underscore:

Sass Partial Syntax:

_filename;

An example shows a partial Sass file named "_colors.scss". (This file will not be directly converted to "colors.css"):

Example

"_colors.scss":

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

Now, if you import this partial file, omit the underline. Sass understands that it should import the file "_colors.scss":

Example

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