What is Sass and getting start

ຫາຍໜ້າກັນໄປນານສົມຄວນ. ກັບມາຄັ້ງນີ້ຂໍ້ອະນຸຍາດເຈົ້າທີ່ເຈົ້າທາງຂຽນບົດຄວາມກ່ຽວກັບ Sass ທີ່ຫຼາຍຄົນອາດຮູ້ຈັກແລະໃຊ້ກັນມາແລ້ວ ແຕ່ບົດຄວາມນີ້ຈະໃຊ້ Sass ດ່ວຍວິທີຂອງ isomorphic developer ກັນ ເລີ່ມກັນເລີຍ.

CSS Preprocessor ຄືຫຍັງ

CSS Preprocessor ມັນກໍ່ຄືການຂຽນ Css ໃນອິກຮູບແບບຫນຶ່ງ ແລ້ວຈາກນັ້ນ
ກໍ່ທຳການ compile ກັບມາເປັນ Css ແບບດັ່ງເດີມ. ແລ້ວເປັນຫຍັງຈຶ່ງຕ້ອງມາຂຽນແບບນີ້ລະ. ເພາະແບບນີ້ຂຽນໄດ້ງ່າຍ ສະດວກ ແລະເຮັດຫຍັງໄດ້ຫຼາຍກ່າວການຂຽນແບບ
ເກົ່າ.

Sass ຄືຫຍັງ

ສຳລັບຄົນທີ່ບໍ່ຮູ້ວ່າ Sass ຄືຫຍັງຈະບອກນະທີ່ນີ້ເລີຍວ່າມັນກໍ່ຄື CSS Preprocessor ຄືການຂຽນ css ແບບໄໝ່ທີ່ເຮັດໃຫ້ເຮົາຂຽນ css ໄດ້ສະດວກຂື້ນຈົນອາດເຮັດໃຫ້ຫຼາຍຄົນທີ່ໃຊ້ມັນຄິດໃນໃຈດັງໆວ່າ ກູບໍ່ຍອມກັບໄປຂຽນ css ແບບເກົ່າແນ່ນອນ

ຄວາມແຕກຕ່າງລະຫວ່າງ sass ແລະ Css

Sass ມີວິທີການຂຽນທີ່ຄ້າຍຄືກັບ css ພຽງແຕ່ວ່າ Sass ນັ້ນຈະມີ

Nesting ທີ່ຊ່ວຍໃຫ້ການຂຽນ selector ງ່າຍຂຶ້ນ

Variables ເກັບຄ່າທີ່ໃຊ້ຕະຫຼອດເອົາໄວ້ເພຶ່ອເຮັດໃຫ້ປ່ຽນແປງງ່າຍ

Mixins ຄ່າຍຄືກັບ function ໃນພາສາໂປຣແກຣມ

Operators ສາມາດທຳການຄຳນວນທາງຄະນິດສາດໄດ້

ນາມສະກຸນຂອງ Sass

sass ມີຢູ່ສອງສະກຸນຄື:

.sass
ເປັນການຂຽນ css ແບບທີ່ບໍ່ມີວົງປີກກາອາໄສການ Tab ຫຍໍ້ໜ້າຄ້າຍຄືພາສາ python ໃນການກຳນົດ CSS Declaration

.scss
ເປັນການຂຽນ sass ທີ່ຄື css ທຳມະດາເລີຍ

ເລີ່ມຕົ້ນໃຊ້ງານ Sass ແບບ isomorphic developer ກັນ

ກ່ອນອຶ່ນຕ້ອງຫາວິທີໃຊ້ໃນການແປງ Sass ກັບມາເປັນ Css ເສຍກ່ອນເຊິ່ງແຕ່ກ່ອນກໍ່ໃຊ້ຕົວ compiler ທີ່ເປັນພວກ Ruby ຫຼືອາດຈະໃຊ້ Prepros ເປັນຕົວ compile ແຕ່ທີ່ນີ້ຈະໃຊ້ nodejs ເຈົ້າເກົ່າເຮົາໂດຍຈະນຳໃຊ້ gulpjs ເປັນ task ຊ່ວຍ compile ໃຫ້ເຮົາ
ສາມາດອ່ານວິທີໃຊ້ gulpjs ໄດ້ທີ່ ການໃຊ້ງານ gulp.js. ຕໍ່ໄປຈະຖືວ່າທຸກຄົນໃຊ້
gulpjs ເປັນແລ້ວຖ້າບໍ່ເປັນເເນະນຳໃຫ້ໄປອ່ານມາກ່ອນ.

ຕິດຕັ້ງຕົວ compile

$ npm install --save gulp-sass

ຈາກນັ້ນໃນ gulpfile ກໍ່ໃຫ້ຂຽນ task ແບບນີ້

gulpfile

ແລ້ວລອງສ້າງ file sass ມາຂຶ້ນມາ(ເຊິ່ງໃນທີ່ນີ້ຈະເປັນ file test.scss ) ແລະ ຍັດ code ລຸ່ມນີ້ລົງໄປ

ແລ້ວທຳການ run task ດ່ວຍຄຳສັ່ງ

$ gulp postscss

ຖ້າບໍ່ມີຫຍັງຜິດພາດເຮົາກໍ່ຈະໄດ້ file test.css ຢູ່ທີ່ \dircss ສະແດງວ່າເຮົາສາມາດໃຊ້ງານ sass ໄດ້ແລ້ວ.

ເຮົາສາມາດໃຫ້ task ຂອງ gulp ດັກການປ່ຽນແປງຂອງ file sass ແລະແປງມາເປັນ css ໃຫ້ເຮົາແບບອັດຕະໂນມັດໄດ້ທັນທີທັນໄດບໍ່ຕ້ອງໄປ run task ເພື່ອແປງຕະຫຼອດ.

gulp.task('watchscss',function () {
    gulp.watch('test.scss',['postscss']);
});

ຈາກນັ້ນກໍ່ run task watchscss ພຽງຄັ້ງດຽວກໍ່ເຮັດໃຫ້ເຮົາສາມາດແປງ
sass ເປັນ css ໄດ້ຕະຫຼອດທີ່ file ມີການປ່ຽນແປງເລີຍທີດຽວ.

ທົດລອງໃຊ້ Nested selectors

ເຮົາສາມາດກຳນົດ style ໃຫ້ກັບ element ທີ່ຊ້ອນທັບກັນຫຼາຍຊັນໄດ້ດ່ວຍວິທີ ຂອງ sass ທີ່ເຮັດໃຫ້ code css ເຮົາອ່ານງ່າຍຂຶ້ນ

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

ເມື່ອເຮົາແປງມາເປັນ css ກໍ່ຈະໄດ້

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

ມາໃຊ້ Variables ກັນ

Variables ໃນ sass ມີປະໂຫຍດຫຼາຍໃນການກຳນົດຄ່າທີ່ເຮົາໃຊ້ເລື່ອຍໆ ແລະ ເຮັດໃຫ້ງ່າຍຕໍ່ການແກ້ໄຂ້ຄ່າໂດຍບໍ່ຈຳເປັນຕ້ອງໄປນຳແກ້ທຸກໆຈູດໆ

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

ເມື້ອແປງມາເປັນ css ຈະໄດ້

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

sass variables ຈະກຳນົດດ່ວຍເຄື່ອງໝາຍ $ ເຊັ່ນ $font-stack $primary-color

ໃຊ້ Mixins ຈັດກຸ່ມ css ເພື່ອສາມາດນຳກັບມາໃຊ້ໄໝ່

mixins ຄ່າຍກັບ function ໃນພາສາໂປຣແກຣມ ເຊຶ່ງມັນຈະໃຊ້ຈັດກຸ່ມ
css ແລະນຳເອົາໄປໃຊ້ໄດ້ທຸກບ່ອນພ້ອມທົງສາມາດປ່ຽນເເປງຄ່າຕາມການໃຊ້ງານໄດ້ອີກດ່ວຍ.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

ແປງມາເປັນ css ຈະໄດ້ວ່າ

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

ຈະເຫັນວ່າມັນເຮັດໃຫ້ css ມີຄວາມທັນສະໄໝຂຶ້ນ.

ການ Extend/Inheritance

ເມື່ອເຮົາຂຽນ class ຂຶ້ນມາແລ້ວຢາກໃຫ້ class ນັ້ນມີຄູນສົມບັດຄືກັບອິກ class ທີ່ເຮົາຂຽນຂຶ້ນມາກ່ອນໜ້ານີ້ສາມາດເຮັດໄດ້ແບບນີ້

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

ເຮົາຈະທຳການ extend class ນັ້ນເຂົ້າມາເມື່ອແປງເປັນ css ກໍ່ຈະໄດ້

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

ຈະເຫັນວ່າມີຄວາມສະດວກຫຼາຍ.

Operators

sass ສາມາດໃຊ້ການຄຳນວນທາງຄະນິດສາດເຂົ້າມາໄດ້ອີກດ່ວຍເຊິ່ງ css ບໍ່ສາມາດເຮັດໄດ້.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

ຈະເຫັນວ່າເຮົາສາມາດຄຳນວນດ່ວຍ + - * / ຄືກັບການຂຽນໂປຣແກຣມເລີຍ.

ສະຫຼຸບ

ການຂຽນ sass ແທນ css ນັ້ນເຮັດໃຫ້ການເຮັດເວັບເປັນໄປໄດ້ສະດວກຂຶ້ນຫຼາຍເພາະວ່າເປັນເຮັດໃຫ້ເຮົາສາມາດແກ້ ແລະ ອ່ານ code ໄດ້ງ່າຍຂຶ້ນກ່າວການຂຽນ css ນອກນັ້ນຍັງສາມາດໃຊ້ css plugin ທີ່ເຮັດໃຫ້ເຮົາເອີ້ນໃຊ້ mixinຂອງຄົນຕຽມໄວ້ໃຫ້ຢ່າງດີແລ້ວນັ້ນດ່ວຍການ @import ເຂົ້າມາ ເຊັ່ນວ່າ Compass CSS3. ນອກຈາກນີ້ແລ້ວການໃຊ້ການແປງ sass ແບບ nodejs ນີ້ກໍ່ເຮັດໃຫ້ເຮົາສາມາດຈັດການ Vendor Prefix ໃຫ້ເປັນແບບ autoprefix ໄດ້ອີກດ່ວຍ ເອົາໄວ້ຈະມາເວົ້າເລື່ອງນີ້ໃນບົດຄວາມຕໍ່ໄປ. ມີຫຍັງກະ comment ດ່າກັນໄວ້ລຸມນີ້ເລີຍ ຫະຫະຫະຫະ....