ການນຳໄຊ Sass

您应该知道的

在继续之前，您应该对以下内容有基本的了解：

  • HTML
  • CSS

如果您想先学习这些科目，请在我们的 主页 上访问这些教程。

什么是 Sass？

  • Sass 指的是 Syntactically Awesome Stylesheet (语法超棒的样式表)
  • Sass ແມ່ນບົດສະແນນ CSS extension.
  • Sass ແມ່ນບົດສະແນນ CSS preprocessor.
  • Sass ສາມາດຈະພົບກັບທັງໝົດສະບັບ CSS.
  • Sass ຫຼຸດລົງຄວາມກະຈາຍສີລະປະມານ CSS ເພື່ອຊ່ວຍທ່ານຊ່ວຍເວລາ.
  • Sass ໄດ້ຮັບການອອກແບບໂດຍ Hampton Catlin ແລະຖືກພັດທະນາໂດຍ Natalie Weizenbaum ໃນປີ 2006.
  • Sass ສາມາດດຶງດູດໄດ້ຫຼາຍຄັ້ງ ແລະໃຊ້ທັນທີ.

ວ່າເປັນຫຍັງທ່ານຈະໃຊ້ Sass?

ທາງເວັບໄຊສະແນນໃຫຍ່ຂື້ນ, ມີຄວາມຫຼາຍຂື້ນ, ແລະບໍ່ພຽງແຕ່ຫຼາຍຂື້ນເທື່ອ. ນັ້ນແມ່ນບ່ອນທີ່ CSS preprocessor ສາມາດຊ່ວຍພວກເຮົາ.

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

ນັກບົດທົ່ວໄປທີ່ອາດຈະມີປະໂຫຍດໃຫ້ກັບ Sass:

ກໍານົດບາງເວັບໄຊທີ່ມີສີສາມນັກສະຖານະສີທີ່ສຳຄັນ:

#a2b9bc
#b2ad7f
#878f99

ຫັງນັ້ນທ່ານຈະເລີ່ມຄະແນນສີ HEX ຈຳນວນຫຼາຍຄັ້ງ? ຈຳນວນຫຼາຍຄັ້ງ. ຖ້າມີສີທີ່ອາດປ່ຽນແປງບັນດາສີບັນດານັ້ນຈະເປັນແນວໃດ?

ທ່ານສາມາດເຮັດການຫຼັງກັນນີ້ທີ່ Sass ວ່າຈະບໍ່ຕ້ອງເລີ່ມການເປັນຄະແນນພວກມັນຫຼາຍຄັ້ງ:

Sass ການພິມຫຼັກ

/* ການສະເໜີສິນລະປະມານສີຕົ້ນ */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* ນຳໃຊ້ສານ */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

ຍິວ່າບໍ່ມີການໃຊ້ Sass，ຖ້າມີການປ່ຽນແປງຂອງສີຕົ້ນທີ່ຂ້າງໜ້າຈະພຽງແຕ່ເພີ່ມພວກມັນໃນບ່ອນດຽວ.

Sass 是如何工作的？

浏览器不理解 Sass 代码。因此，您需要一个 Sass 预处理器来将 Sass 代码转换为标准 CSS。

这个过程称为转译（transpiling）。所以，您需要为转译器（某种程序）提供 Sass 代码，然后取回 CSS 代码。

ຄຳແນະນຳ:ການປ່ຽນປະເພດວ່າງອາດສາມາດພົບໄດ້ວ່າວ່າການປ່ຽນປະເພດຂອງວິກາດທີ່ຖືກຂຽນໂດຍພາສາຫຼັກແລະປ່ຽນປະເພດທີ່ຕ່າງກັນ.

ຊື່ປະເພດເອກະສານ Sass

ຊື່ແຫຼງຂອງເອກະສານ Sass ແມ່ນ ".scss".

Sass ຄຳເຫັນ

Sass ສະໜັບສະໜູນຄຳເຫັນສາຍສະຖານນິວ CSS /* comment */ແລະຍັງສະໜັບສະໜູນຄຳເຫັນບາງຄັ້ງ // comment:

Sass ການພິມຫຼັກ

/* ການກໍ່ສ້າງສີຫຼັກ */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* ນຳໃຊ້ສານ */
.main-header {
  background-color: $primary_1; // ທ່ານສາມາດເພີ່ມຄຳເຫັນບາງຄັ້ງຢູ່ບໍລິສັດດັ່ງກ່າວ
}