Sass @extend ແລະ ການລອດຫັນ

ຄຳສັ່ງ Sass @extend

@extend ຄຳສັ່ງນຳມາອີກຈະອະນຸຍາດທ່ານທີ່ຈະເຊື່ອມທີ່ມີລາຍລະອຽດ CSS ຈາກເປີດໄວ້ບາງແບບໄປເປີດໄວ້ບາງແບບອື່ນໆ.

ຖ້າທ່ານມີສິ່ງທີ່ມີຮູບແບບທີ່ບໍ່ກົງກັນກັບສິ່ງອື່ນໆໃນຈຸດນັ້ນເພື່ອຈະມີສິ່ງທີ່ຫຼາຍກວ່າຫຼາຍຢ່າງນ້ອຍ: @extend ຄຳສັ່ງນຳມາອີກມີປະສິດທິພາບຫຼາຍ.

ຄວາມຍັງມີຄວາມສຳຄັນຫຼາຍຂອງ Sass ຄວາມທີ່ລາວປະດິດໃນຖະແຫຼງການ Sass. ຍັງມີຄວາມທີ່ລາວປະດິດໃນຖະແຫ�ງການ Sass. @extend ຄຳສັ່ງນຳມາອີກໃນ .button-basic ທີ່ມີຜະລິດນະໂຍບາຍ CSS ທັງໝົດ. ນອກຈາກນັ້ນຍັງມີລາຍລະອຽດສີ:

ກົດລະບຽບ SCSS:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

ຫຼັງຈາກການຕັດອານານີ້, CSS ຈະເບິ່ງຄືເຫັນດັ່ງລາວ:

ຄູ່ມື CSS:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

ກ່ຽວກັບ @extend ຄຳສັ່ງ, ທ່ານບໍ່ຕ້ອງບັນທືກຊັບສັບພັນທີ່ຫຼາຍໃນປະເພດ HTML ເອກະສັບ, ອີງຕາມ:<button class="button-basic button-report">Report this</button>. ທ່ານພຽງແຕ່ຕ້ອງບັນທືກ .button-report ເພື່ອມາໄດ້ສອງຊັບສັບກຳນວນ.

@extend ຄຳສັ່ງອາດຊ່ວຍທີ່ຮັກສາຄວາມສາຫຼົກຂອງຄວາມຂອງ Sass ເປັນຢ່າງຫຼາຍ (DRY).