ການຂຽນ Sass/Scss ດ້ວຍ Koala

Published in

VtCamp

3 min readSep 30, 2018

ໃນບົດຄວາມກ່ອນໆນີ້ເຮົາໄດ້ເວົ້າເຖິງຄວາມສະດວກຂອງການນຳໃຊ້ Sass/Scss ມາແລ້ວ, ຖ້າໃຜຍັງບໍ່ໄດ້ອ່ານສາມາດເຂົ້າໄປອ່ານໄດ້ [ທີ່ນີ້].

ສຳລັບບົດຄວາມນີ້ກໍ່ຈະເວົ້າເຖິງເຄື່ອງມືທີ່ໃຊ້ຂຽນ Sass/Scss ແລະ ເຮົາຈະມາລອງອອກແບບໜ້າຟອມ Login ໂດຍໃຊ້ການຂຽນ CSS ໃນຮູບແບບຂອງ Sass ດັ່ງນັ້ນບໍ່ລໍຊ້າເຮົາໄປເລີ່ມກັນເລີຍ.

step 1: ໂຫຼດ Koala ມາແລ້ວທຳການຕິດຕັ້ງໃຫ້ຮຽບຮ້ອຍ, ໂດຍທ່ານສາມາດດາວໂຫຼດໄດ້ທີ່ເວບໄຊຫຼັກຂອງ Koala ໄດ້[ທີ່ນີ້]

ຫຼັງຈາກທ່ານທຳການຕິດຕັ້ງສຳເລັດ ທ່ານກໍ່ຈະໄດ້ໜ້າຕາຂອງໂປຣແກຣມປະມານນີ້:

step 2: ສ້າງ Folder ຂອງໂປຣເຈັກຂອງທ່ານ, ແລ້ວທຳການສ້າງໄຟລ index.html ແລະ style.sass ໄວ້.

ຫຼັງຈາກນັ້ນໃຫ້ທຳການເປີດໄຟລທັງ 2 ດ້ວຍ text editor ຕົວໃດກໍ່ໄດ້ເຊົ່ນ: Sublime text, VS code, Atom, etc.

ຈະໄດ້ໜ້າຕາປະມານນີ້:

step 3: ໃຫ້ລາກ Folder ໂປຣເຈັກຂອງທ່ານເຂົ້າໄປໃນໂປຣແກຣມ Koala ຫຼື ຈາກກົດທີ່ປຸ່ມ Add Folder ກໍ່ໄດ້ເຊັ່ນກັນ.

ຈະເຫັນໄດ້ວ່າໄຟລ .sass ຂອງເຮົາກໍ່ຈະປາກົດຢູ່ໃນໜ້າຂອງໂປຣແກຣມແລ້ວ, ຈາກນັ້ນໃຫ້ທຳການຄລິກທີ່ໄຟລ style.sass ກໍ່ຈະໄດ້ດັ່ງນີ້:

ໃນທີ່ນີ້ຂ້າພະເຈົ້າຈະທຳການເລືອກທີ່ Auto compile ເພື່ອໃຫ້ມັນທຳການ compile code ໃຫ້ອັດຕະໂນມັດເມື່ອມີການ save ໄຟລ.

*ຖ້າເຮົາທຳການ compile ໂປຣແກຣມຈະສ້າງໄຟລ CSS ໃຫ້ອັດຕະໂນມັດ.

step 4: ລົງມືຂຽນ code ນຳກັນເລີຍ.

ເຮັດໂຄງຮ່າງໜ້າ Login ແລະ ທຳການ link CSS ໃຫ້ຮຽບຮ້ອຍ(ໄຟລ CSS ທີ່ຈະໄດ້ຫຼັງຈາກ compile ຈະມີຊື່ຄືກັນກັບຊື່ທີ່ຕັ້ງໃຫ້ໄຟລ .sass ແຕ່ຈະໄດ້ເປັນ .css ແທນ)ໂດຍໄປທີ່ໜ້າ index.html ໂດຍຈະມີໂຄງຮ່າງປະມານນີ້:

Code ຂອງ Sass ຈະໄດ້ດັ່ງນີ້:

$bg-color: linear-gradient(to right, #868f96 0%, #596164 100%)
body
 background-image: $bg-color
 margin: 0 auto
.container
 width: 500px
 height: 400px
 text-align: center
 background-color: rgba(52,73,94,0.7)
 border-radius: 5px
 margin: 0 auto
 margin-top: 150px
.login_icon
 width: 120px
 height: 120px
 margin-top: -60px
 margin-bottom: 30px
%input_text
 height: 48px
 width: 300px
 font-size: 18px
 margin-bottom: 20px
 background-color: #fff
 padding-left: 10px
 border: none
.input_email
 @extend %input_text
.input_password
 @extend %input_text
=button($btn_color,$btn_sec_color)
 font-size: 18px
 padding: 10px 25px
 color: #fff
 cursor: pointer
 border-radius: 5px
 border: none
 background-color: $btn_color
 border-bottom: 4px solid $btn_sec_color
 margin-bottom: 10px
 margin-top: 5%
.btn_login
 +button(#2ECC71,#27AE60)
.btn_register
 +button(#3A7EDC,#335F9C)

ແລະ code ຂອງ CSS ຈະໄດ້ດັ່ງນີ້:

body {
  background-image: -webkit-gradient(linear, left top, right top, from(#868f96), to(#596164));
  background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
  margin: 0 auto; }.container {
  width: 500px;
  height: 400px;
  text-align: center;
  background-color: rgba(52, 73, 94, 0.7);
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 150px; }.login_icon {
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-bottom: 30px; }.input_email, .input_password {
  height: 48px;
  width: 300px;
  font-size: 18px;
  margin-bottom: 20px;
  background-color: #fff;
  padding-left: 10px;
  border: none; }.btn_login {
  font-size: 18px;
  padding: 10px 25px;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  background-color: #2ECC71;
  border-bottom: 4px solid #27AE60;
  margin-bottom: 10px;
  margin-top: 5%; }.btn_register {
  font-size: 18px;
  padding: 10px 25px;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  background-color: #3A7EDC;
  border-bottom: 4px solid #335F9C;
  margin-bottom: 10px;
  margin-top: 5%; }

ຜົນທີ່ໄດ້ຈາກການອອກແບບໜ້າ login

ເປັນຈັ່ງໃດກັນແນ່ກັບການຂຽນ Sass ໃນການອອກແບບໜ້າຟອມ, ຖ້າອີງຕາມຄວາມຄິດສ່ວນໂຕຂອງຂ້າພະເຈົ້າຮູ້ສຶກວ່າມັນຊ່ວຍໄດ້ຫຼາຍອີ່ຫຼີ ແລະ ມັນກໍ່ຄຸ້ມຄ່າທີ່ເຮົາຈະສຶກສາແລ້ວນຳໄປພັດທະນາຕໍ່ ເພື່ອໃຊ້ໃນໂປຣເຈັກອື່ນໆຕໍ່ໄປ.

ການຂຽນ Sass/Scss ດ້ວຍ Koala

Written by phatsss