Sass @import ແລະ Partials

Sass ສາມາດກະຈາຍລະບົບ CSS ສະຫຼາຍບັນທຶກ (DRY, Don't Repeat Yourself, ບໍ່ຕ້ອງຂຽນຄືກັນ.

ວິທີທີ່ໜຶ່ງຂອງການຂຽນລະບົບ DRY ແມ່ນການບັນທຶກຄວາມປະສົງຫຼາຍບັນທຶກໃນເອກະສານສະເພາະຫຼັງ.

ທ່ານສາມາດໃຊ້ບັນທຶກ CSS ສາກົນເພື່ອສ້າງເອກະສານນ້ອຍຫຼາຍເອກະສານ ແລະ ບັນທຶກໃນເອກະສານ Sass ອື່ນ. ຕົວຢ່າງເຫດນັ້ນສາມາດເປັນ: ບັນທຶກການປັບລົງຄືກັນ, ຄວາມປະສົງ, ສີ, ມູນນິວ, ແລະ ອື່ນໆ.

ນຳເອົາເອກະສານ Sass:

ຄືດັ່ງກັບ CSS, Sass ກໍ່ສະຫນັບສະຫນູນ: @import 指令.

@import ຄຳສັ່ງຈະສາມາດບັນທຶກຂໍ້ມູນເອກະສານໃນເອກະສານອື່ນ.

ຍ້ອນບັນຫາຄວາມສະຕິກຳ: @import ຄຳສັ່ງມີຄວາມຫຍຸ້ງຍາກຫຼາຍບ່ອນ; ແຕ່ວ່າເວລາທີ່ທ່ານເອົາຄຳສັ່ງນັ້ນຈະມີການສ້າງການຮັບສົນທະນາ HTTP ອີກຄັ້ງ. @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" ເຂົ້າໃນເອກະສານອື່ນທີ່ມີຊື່ "standard.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 将不会转译它。以这种方式命名的文件在 Sass 中称为 partials。

ດັ່ງນັ້ນ, ບົດຂັດແຍ່ງ Sass partial ຕ້ອງໃຊ້ຊື່ບໍ່ມີສິນລະປະສານຕົ້ນ:

Sass Partial 语法：

_filename;

ລາຍການຕົວຢ່າງທີ່ສະແດງວ່າ ບົດຂັດແຍ່ງ Sass partial Sass _colors.scss" (ບົດຂັດແຍ່ງນີ້ບໍ່ຈະຖືກປ່ຽນຫຼັງຈາກ "colors.css"):

ການຕົວຢ່າງ

"_colors.scss":

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

ຕອນນີ້, ຖ້າເຈົ້ານຳເອົາສິ່ງຂອງບົດຂັດແຍ່ງນີ້, ເຈົ້າບໍ່ຕ້ອງລະບຸສິນລະປະສານ. Sass ພິຈາລະນາວ່າ ຂໍ້ມູນນີ້ຄວນນຳເອົາບົດຂັດແຍ່ງ "_colors.scss":

ການຕົວຢ່າງ

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