Sass @import နှင့် Partials

Sass 可保持 CSS 代码干燥（DRY，Don't Repeat Yourself，不要重复自己）。

编写 DRY 代码的一种方法是将相关代码保存在单独的文件中。

您可使用 CSS 片段创建小文件，并包含在其他 Sass 文件中。例如这类文件可以是：重置文件、变量、颜色、字体等。

Sass 文件导入

就像 CSS 一样，Sass 也支持 @import 指令。

@import 指令允许您将一个文件的内容包含在另一个文件中。

由于性能问题，CSS @import 指令有一个主要的缺点；每次调用它时都会创建一个额外的 HTTP 请求。但是，Sass @import အမိန့်အရာကို CSS တွင် ပါဝင်ခြင်းပြုလုပ်ပြီး အခြား HTTP ခေါ်ချက်များ ကို လိုဘူးသော အချက်အရာများ မဟုတ်။

Sass အော်ဝင်ဘာသာစကား:

@import filename;

အကြိတ်အကြောင်း:သင် ဖိုင်အပိုင်းကို အသုံးပြုရာတွင် ဖိုင်အပိုင်းအပေါ်အား အပိုင်းပေါ်အပိုင်း အားလုံး အသုံးပြုရန် လိုဘူးသော အပိုင်းအချက်များ အသုံးပြုပါ။ Sass က .sass သို့မဟုတ် .scss ဖိုင်များ ကို အမြန်မြန်ကျသော အခြေခံအား သတ်မှတ်လိုသည်။ သို့သော် သင် ဖိုင်အပိုင်းကို အော်ဝင်ခြင်းပြုလုပ်ရာတွင် CSS ဖိုင်များ ကို လည်း အသုံးပြုနိုင်ပါသည်:@import အမိန့်အရာတွင် ဖိုင်တစ်ခုကို အော်ဝင်ခြင်းပြုလုပ်ပြီး အခြား ဖိုင်များ တွင် အသုံးပြုနိုင်သော အမှတ်အသစ်များ သို့မဟုတ် mixin များ ကို အသုံးပြုနိုင်ပါသည်:

သင် အခြား ဖိုင်များ အများဆုံး အော်ဝင်ခြင်းပြုလုပ်နိုင်ပါသည်:

အကျိုး

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

ကျွန်တော်တို့ အကျဉ်းချက်တစ်ခုကို မျှော်လင့်ပါ။ ခန့်မှန်းချက်အားဖြင့် ကျွန်တော်တို့ ရှိသော "reset.scss" ဖိုင်သည် ထို့အတိုင်းဖြစ်ပါသည်:

SCSS ဘာသာစကား (reset.scss):

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

အရ "reset.scss" ဖိုင်ကို အော်ဝင်ခြင်းပြုလုပ်ရန် ကျွန်တော်တို့ သည် တစ်ခုခုတွင် ထပ်ထည့်ပြီးဖြစ်သည်:

ကျွန်တော်တို့ ထို့အတိုင်း လုပ်ကြည်းတယ်လို့မှာ ဖိုင်အောက်ပိုင်းတွင် ထပ်ထည့်ပြီးဖြစ်သည်: @import အမိန့်အရာ；ထို့အတိုင်း ပါဝင်သော အရာများ အပြည့်အပြား အသုံးပြုနိုင်သည်:

SCSS ဘာသာစကား (standard.scss):

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

အရ "standard.css" ဖိုင်ကို ပြောင်းလဲခြင်းပြုလုပ်ချိန်တွင် CSS ကို အော်ချင်းအားဖြင့် ထို့အတိုင်းဖြစ်ပါသည်:

CSS ပေါ့ပေါ့ထွက်ခြင်း：

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

Sass Partials（အစိတ်အပိုင်းဖိုင်များ）

မြန်မာဘာသာတွင် မူကြောင်းအားဖြင့် Sass က .scss ဖိုင်များအား အမြန်မြန်ကျသော ပြောင်းလဲခြင်းပြုလုပ်သည်။ သို့သော် ဖိုင်တွင်အော်ဝင်ခြင်းအားဖြင့် သင်သည် ဖိုင်ကို အမြန်မြန်ကျသော ပြောင်းလဲခြင်းပြုလုပ်ချိန်တွင် လိုမရှိဘူး။

Sass အချက်အလက် တစ်ခုအား သဘောတူသရောသော အစား ပြောင်းကာ ဖြစ်ပါသည်။ ထိုအချက်အလက် အမည် ဖြင့် အသုံးပြု သော ဖိုင် ကို Sass တွင် partials ဟု ခေါ်ပါသည်။

ထို့ကြောင့် partial Sass ဖိုင် အသစ်အမည် ကို စတင် အကြမ်းဖတ် ပါသည်အထိ။

Sass Partial အပြောအထိမ်း

_filename;

အောက်ပါအချက်အလက် ကို ကိုယ်စား "_colors.scss" အမည် ရှိသော partial Sass ဖိုင် ကို ပြထားသည်။ (ဤ ဖိုင် ကို မသိမြင် ရပါ။):

အကျိုး

"_colors.scss":

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

ကြားရသည်ကို အချက်ပြု ပါ။ ဤ partial ဖိုင် ကို ထုတ်ဖိုင် ကို အကြမ်းဖတ် လိုက်ပါ။ Sass အကျယ်း အကြမ်းဖတ် အချက်ပြု သည် ဖြစ်ပါသည် အချက်ပြု "_colors.scss" ဖြစ်ပါသည်အထိ။

အကျိုး

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