Belajar Sass episode 2, menginstal dan mengenal sass

bagi yang belum membaca kisah jarwo dan paijo bisa baca dlu episode 1 nya disini

[link]https://sekolahkoding.com/forum/belajar-sass-episode-1-apa-itu-sass [/link]

"piye wo ? udah belum belajar sass-nya ?"

"yo iki mas, aku bingung gimana ya caranya make sass ?" kata jarwo.

" gampang wo, ngene lho. jadi pertama-tama koe(kamu) harus install sass dulu. ada beberapa cara install sass, wo. 1. pertama pake applikasi, contohnya Koala, Compas.app, dan ada beberapa lainnya. 2. ada juga pake command line, nah kalau command line pertama-tama harus install ruby dulu. tatacaranya bisa lihat disini

<a href=' http://sass-lang.com/install '> http://sass-lang.com/install </a>

tapi saya sendiri punya cara tersendiri wo, saya pake gulp, jadi dia taskrunner atau build tools, dengan plugin sass-gulp nanti dengan otomatis file sass di compile ke css. untuk ini saya udah buat tutorialnya wo disekolah kodingnih link-nya kalau gak percaya

<a href='https://sekolahkoding.com/forum/apa-itu-taskrunner-build-tools-apa-itu-gulp '>https://sekolahkoding.com/forum/apa-itu-taskrunner-build-tools-apa-itu-gulp </a>

kalo udah selesai installnya yok kita belajar bareng wo, tuh sama member sekolah koding yang lain juga.

/*-------------------------------PREPROSESSING--------------------------*/

dengan sass kita memiliki beberapa kemampuan yang CSS biasa ga miliki. contohnya variables, nesting, mixins, inheritence dan lain-lain. preprosessing ini maksudnya adalah melakukan / mengerjakan file Sass dengan fitur-fitur tersebut sebelum file tersebut dicompile ke CSS murni.

jika temen-temen udah install di command line, temen2 bisa menjalankan program di command line

 sass input.scss output.css

setelah itu, bisa juga "watch" file / keseluruhan folder tersebut dengan cara

 sass --watch app/sass:public/stylesheets

/*-------------------------------VARIABLES---------------------------*/

kalo temen-temen dah belajar javascript atau bahasa pemrograman lainnya pasti udah tau dong apa itu variable. Fungsi dari variabel ini adalah untuk menyimpan value. nah dengan ini, kamu bisa menyimpan informasi dan digunakan secara berulang-ulang dalam stylesheet nantinya. Kamu bisa menyimpan warna, jenis font, atau CSS value apapun yang kamu mau. Sass menggunakan simbol "$" sebagai lambang dari variable. begini contohnya :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

setelah sass diproses, maka nilai variabel yang sudah kita tentukan sebelumnya akan diubah ke normal CSS. Hal ini akan menjadi sangat berguna misalnya untuk penggunaan warna, sehingga warnanya konsisten dari awal hingga akhir.

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

/\*------------------------------- NESTING---------------------------*/

ketika kita menulis HTML, ada istilah nesting. ada div didalam div, dimana div itu didalam body dan body didalam html tag. kaya memenya jay-z lah klo agan-agan tau. hehe. tapi kita tidak menjumpai hal tersebut di CSS.

Nah, dengan Sass kita bisa menulis dengan cara nesting CSS selector seperti kita menulis HTML.

ini salah satu contoh yang pada navigasi website :

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

  li { display: inline-block; }

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

ul, li dan a selector ditulis didalam nav selector. ini salah satu cara, agar kode mudah dipahami dan dibaca. apabila kita generate scss file diatas, maka akan menjadi seperti ini :

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

nav li {
  display: inline-block;
}

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

/\*------------------------------- PARTIAL---------------------------*/

Partial Sass file ini biasa cuma kode pendek yang nantinya bakal di import di file sass lainnya. Partial ini seperti file sass biasanya, hanya saja diawali dengan "_" underscore, contohnya "_partial.scss". dengan adanya underscore diawal nama file, maka sass tahu bahwa file tersebut tidak perlu dicompile karena akan di import di file sass lainnya.

IMPORT/*------------------------------- OPERATOR---------------------------*/

Css juga memiliki ditur import, sayangnya dengan fitur @import ini CSS akan membuat HTTP request baru, yang berakibat pada performa website yang melambat. Bedanya dengan Sass, Sass akan memilih semua file yang akan diimport dan disatukan kedalam satu file dan dicompile menjadi satu file CSS. Hal ini tentunya tidak akan menghambat performa website, tetapi code-nya bisa dipisah-pisah menjadi lebih kecil dan lebih mudah di manage.

anggap saja teman-teman memiliki dua file Sass, _reset.scss dan base.scss. Dan kita ingin mengimport _reset.scss ke dalam base.scss

// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

// base.scss

@import 'reset';

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

perhatikan penggunaan @import 'reset'; di file base.scss . maka secara otomatis file CSS yang dihasilkan akan menjadi seperti ini :

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

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

/\*------------------------------- MIXINS---------------------------*/

Kadang kalau kita nulis CSS untuk cross browser, ngeselin banget banyak prefix2 ga jelas buat setiap browser. nah dengan mixin ini, kita bisa mengelompokan CSS deklarasi menjadi satu nama, yang bisa dipakai berulang-ulang di file tersebut. contohnya untuk border-radius :

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

untuk membuat mixin teman-teman bisa menggunakan directive @mixin dan kemudian memberinya nama. mixin diatas namanya border-radius. mixin ini didalamnya memiliki variable $radius, yang valuenya kita bisa tentukan sebelumnya.

untuk menggunakan mixin, kita gunakan @include diikuti dengan nama mixin, yaitu berder-radius untuk kasus diatas. Setelah dicompile, kira CSS filenya akan seperti ini :

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

/*---------------------------EXTEND / INHERITENCE---------------------------*/

Dengan @extend kamu jadi bisa menggunakan CSS properti dari selector satu ke selector lainnya. contoh dibawah kita akan membuat massaging error, warning dan sukses sederhana :

.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;
}

dengan kode diata ".massage" properti dapat diakses dan digunakan di ".error" ".warning" dan juga ".success". dengan begini kita akan terhindar untuk menulis banyak kelas dalam satu HTML element. hasil CSS akan seperti ini :

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

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

/\*------------------------------- OPERATOR---------------------------*/

saya suka kesel sama CSS, masa gabisa sih kita itung-itungan sederhana di CSS, untuk width misal saya pengen setengahnya width dari containernya. masa saya harus itung sendiri. Nah untungnya dengan Sass ada fitur standart math operator, jadi kita bisa dengan mudah +, -, *, /, dan % satuan. pada contoh dibawah kita akan menggunakan operasi matematika sederhana pada aside dan article.

.container { width: 100%; }

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

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

enak kan jadinya gaperlu ngitung-ngitung sendiri. tau-tau CSSnya udah jadi begini :

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

"nah wis ngono loh wo, gampang kan Sass ?" kata mas paijo.

"iya mas, gampang-gampang buangget!" kata jarwo.

"yo, tapi itu cuma intro, nanti lebih lengkapnya bisa buka dokumentasinya langsung disini"

<a href=' http://sass-lang.com/documentation/file.SASS_REFERENCE.html '> http://sass-lang.com/documentation/file.SASS_REFERENCE.html </a>

begitulah kisah singkat antara jarwo dan mas paijo, sampai jumpa lagi hehehehe

oh iya buat temen-temen yang mau kenalan sama saya, boleh add fb saya ya

<a href=' https://web.facebook.com/yudhatamadanang '> https://web.facebook.com/yudhatamadanang </a>

tak kenal maka tak sayang, mari kita jalin silaturahmi, biar rejeki kita lancar :))

source: langsung dari web aslinya sass. dengan sedikit cerita fiksi hehe