ມາຂຽນ Sass/Scss ກັນເຖາະ

Sass (CSS preprocessor) ແມ່ນວິທີການຂຽນ CSS ໃນອີກຮູບແບບໜຶ່ງ ເຊິ່ງຈະເຮັດໃຫ້ code ສັ້ນລົງ ແລະ ສາມາດ compile code ດັ່ງກ່າວກັບໄປຢູ່ໃນຮູບແບບ CSS ທຳມະດາໄດ້ອີກ.

ເປັນຫຍັງຈຶ່ງຕ້ອງຂຽນ Sass/Scss ?

ຍ້ອນປະສິດທິພາບ ແລະ ຄວາມບໍ່ຊັບຊ້ອນຂອງມັນຈຶ່ງເຮັດໃຫ້ການຂຽນ CSS ສັ້ນລົງ, code ອ່ານງ່າຍຂຶ້ນ ແລະ ສາມາດແກ້ໄຂ code ໄດ້ງ່າຍ.

ລອງຄິດພາບ code CSS ທີ່ມີເປັນພັນໆແຖວລອງເບິ່ງ, ຖ້າເປັນ code CSS ແບບທຳມະດາ ເວລາຈະແກ້ໄຂຈຸດໃດຈຸດໜຶ່ງແນ່ນອນວ່າຕ້ອງໃຊ້ເວລານັ່ງເລື່ອນຫາ code ຈົນຕາປີ້ນພຸ້ນແຫຼະ.

ຄວາມສາມາດຂອງ Sass/Scss

• ສາມາດສ້າງຕົວປ່ຽນໄດ້(Variables): ການປະກາດຕົວປ່ຽນໃນ CSS preprocessor ນີ້ຈະໃຊ້ຫຼັກການປະກາດຕົວປ່ຽນມາເກັບຂໍ້ມູນໃດໜຶ່ງຄືກັບການຂຽນໂປຣແກຣມຫັ້ນລ່ະ ໂດຍຈະນຳໃຊ້ເຄື່ອງໝາຍ $ ນຳໜ້າຊື່ຕົວປ່ຽນ.

Sass

ຫຼັງຈາກ compile ຈະໄດ້ code CSS ດັ່ງນີ້:

css

• ສາມາດຂຽນ selection ຊ້ອນກັນໄດ້(Nesting): ຄືການຂຽນແບບເຈາະຈົງໃນ selector ທີ່ຊ້ອນກັນ.

Sass

ຫຼັງຈາກ compile ຈະໄດ້ code CSS ດັ່ງນີ້:

CSS

• Import : ຄືການ import file ທີ່ເຮົາໄດ້ຂຽນແຍກໄວ້ຕ່າງຫາກເຂົ້າໄວ້ນຳກັນແລ້ວ compile ອອກມາເປັນ CSS ໄຟລດຽວ.

ຕົວຢ່າງ: ເຮົາມີໄຟລ Sass ຢູ່ 2 ໄຟລ ແລ້ວເຮົາທຳການ import

sample.sass

ເຮົາຈະທຳການ import sample.sass ໄປທີ່ style.sass

style.sass

ຫຼັງຈາກ compile ຈະໄດ້ code CSS ດັ່ງນີ້:

CSS

• Partials: ຄືການທີ່ຂຽນ Sass ແຍກອອກເປັນໄຟລຍ່ອຍໆ ເຊິ່ງການແຍກແບບນີ້ຈະເຮັດໃຫ້ code ເປັນລະບຽບ ແລະ ຈະງ່າຍໃນເວລາທີ່ຕ້ອງການຈະແກ້ໄຂໃນສ່ວນໃດສ່ວນໜຶ່ງ, ໃນການຕັ້ງຊື່ໄຟລທີ່ເຮົາຕ້ອງການແຍກນັ້ນກໍ່ພຽງແຕ່ໃຊ້ເຄື່ອງໝາຍ _(underscore) ນຳໜ້າຊື່ໄຟລ, ເມື່ອ compile code ຕົວ compiler ຈະບໍ່ທຳການສ້າງໄຟລ CSS ຂື້ນຖ້າເຫັນວ່າ ໄຟລນັ້ນມີ _(underscore) ໂດຍປົກກະຕິເມື່ອ compile code ຕົວ compiler ຈະທຳການສ້າງໄຟລ CSS ຕາມຊື່ໄຟລທີ່ເຮົາຕັ້ງໃຫ້ໄຟລ Sass (ຕ່າງກັນທີ່ນາມສະກຸນຂອງໄຟລ). ສ່ວນໃນເວລາເອີ້ນໃຊ້ກໍ່ສາມາດ import ມາໃຊ້ໄດ້ເລີຍ(ບໍ່ຈຳເປັນຕ້ອງຂຽນເຄື່ອງໝາຍ _ ນຳໜ້າໄຟລກໍ່ໄດ້).
• Mixins: ຄືການໃຊ້ຟັງຊັ່ນໂດຍທົ່ວໄປຫັ້ນລ່ະ ເຊິ່ງເຮົາສາມາດໃສ່ຄຸນສົມບັດບາງຢ່າງໃຫ້ກັບຟັງຊັ່ນແລ້ວຫຼັງຈາກນັ້ນເຮົາກໍ່ສາມາດເອີ້ນໃຊ້ຟັງຊັ່ນນັ້ນໄດ້ເລີຍ.

ໃນການກຳນົດຟັງຊັ່ນນັ້ນກໍ່ພຽງແຕ່ໃຊ້ເຄື່ອງໝາຍ =ນຳໜ້າຊື່ຂອງຟັງຊັ່ນ, ສ່ວນເວລາເອີ້ນໃຊ້ກໍ່ພຽງແຕ່ໃຊ້ເຄື່ອງໝາຍ + ນຳໜ້າຊື່ຂອງຟັງຊັ່ນ ເທົ່ານີ້ເຮົາກໍ່ສາມາດນຳໃຊ້ຄຸນສົມບັດທີ່ຢູ່ໃນຟັງຊັ່ນນັ້ນໄດ້ແລ້ວ.

ຕົວຢ່າງ: ເຮົາຕ້ອງການໃຫ້ຂອບຂອງ box ມີຄວາມມົນ50px ໃນທຸກໆ browser ເຮົາກໍ່ສາມາດສ້າງຟັງຊັ່ນໄດ້ດັ່ງນີ້:

Sass

ຫຼັງຈາກ compile ຈະໄດ້ code CSS ດັ່ງນີ້:

CSS

• Extend/Inheritance: ການສືບທອດ ຄືການນຳໃຊ້ຄຸນສົມບັດທີ່ມີຢູ່ແລ້ວ ເຊິ່ງເຮົາຈະໃຊ້ເຄື່ອງໝາຍ @ ຕາມດ້ວຍ selector ທີ່ເຮົາຕ້ອງການສືບທອດຄຸນສົມບັດຂອງມັນ ເຊິ່ງຈະມີປະໂຫຍດຫຼາຍເມື່ອຕ້ອງການນຳໃຊ້ຄຸນສົມບັດທີ່ຄ້າຍຄືກັນເຊັ່ນ: ປຸ່ມກົດ ທີ່ມີຮູບຊົງຄືກັນ ແຕ່ຕ່າງກັນທີ່ຂະໜາດ ຫຼື ສີຕ່າງໆ ເຮົາກໍ່ສາມາດກຳນົດພາຍຫຼັງໄດ້.

Sass

ຫຼັງຈາກ compile ຈະໄດ້ code CSS ດັ່ງນີ້:

CSS

• ການຄຳນວນ(Operators): ຄືການນຳໃຊ້ການ ບວກ,ລົບ,ຄູນ ແລະ ຫານ ເຂົ້້າໃນການຂຽນ Sass ໄດ້.

Sass

ຫຼັງຈາກ compile ຈະໄດ້ code CSS ດັ່ງນີ້:

CSS

ມາຮອດນີ້ຫຼາຍໆຄົນກໍ່ຄົງຈະເຫັນເຖິງຄວາມສະດວກ ແລະ ຄວາມງ່າຍໃນການນຳໃຊ້ Sass/Scss ກັນແລ້ວ ດັ່ງນັ້ນສຳລັບມືໃໝ່ແທ້ໆ ຂ້າພະເຈົ້າແນະນຳໃຫ້ສຶກສາ Scss ເພາະການຂຽນຄ້າຍຄື CSS ຫຼາຍ(ມີ ; ແລະ ວົງປີກກາ ເປີດ/ປິດ) ເຊິ່ງຈະເຮັດໃຫ້ເຂົ້າໃຈໄດ້ງ່າຍກວ່າ Sass.

• ປຽບທຽບ Sass ແລະ Scss

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

ຈະເຫັນໄດ້ວ່າ Sass ແລະ Scss ກໍ່ແທບຈະບໍ່ຕ່າງກັນເທົ່າໃດ ແຕ່ທີ່ສຳຄັນມັນເຮັດໃຫ້ເວລາທີ່ໃຊ້ໄປກັບການຂຽນ CSS ເຮົາສັ້ນລົງຢ່າງແທ້ຈິງ.