Sass vs. LESS vs. Stylus: Preprocessor Shootout

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Menghasilkan kekuatan sebenarnya dari preprocessor CSS adalah sebuah petualangan. Ada banyak bahasa, sintaks, dan fitur, semua siap digunakan sekarang.

Dalam artikel ini, kita akan membahas berbagai fitur dan manfaat menggunakan tiga preprocessor yang berbeda - Sass, LESS, dan Stylus.

Pengenalan

Preprocessor menghasilkan CSS yang berfungsi di semua browser.

CSS3 preprocessor adalah bahasa yang ditulis untuk tujuan semata-mata menambahkan fitur inventif yang keren ke CSS tanpa merusak kompatibilitas browser. Mereka melakukan ini dengan menyusun kode yang kita tulis ke CSS biasa yang dapat digunakan di browser apa pun sepanjang perjalanan kembali ke zaman batu. Ada ribuan fitur yang dibawa oleh preprocessors, dan dalam artikel ini kita akan membahas beberapa yang dipublikasikan, dan beberapa yang tidak dipublikasikan. Mari kita mulai.

Sintaks

Bagian terpenting dari penulisan kode dalam preprocessor CSS adalah memahami sintaks. Untungnya bagi kami, sintaksnya (atau bisa juga) identik dengan CSS biasa untuk ketiga preprocessor.

Sass & LESS

Sass dan LESS keduanya menggunakan sintaks CSS standar. Ini membuatnya sangat mudah untuk mengonversi file CSS yang ada ke preprocessor. Sass menggunakan ekstensi file .scss dan LESS menggunakan ekstensi .less. File Sass atau LESS dasar dapat diatur seperti di bawah ini:

1	/* style.scss or style.less */
2	h1 {
3	color: #0982C1;
4	}

Seperti yang Anda ketahui, ini hanya CSS biasa, yang dikompilasi dengan sempurna di Sass dan LESS.

Penting untuk dicatat bahwa Sass juga memiliki sintaks yang lebih tua, yang menghilangkan tanda titik koma dan kurung kurawal. Meskipun ini masih ada, sudah tua dan kami tidak akan menggunakannya melewati contoh ini. Sintaksnya menggunakan ekstensi file .sass dan terlihat seperti ini:

1	/* style.sass */
2	h1
3	color: #0982c1

Stylus

Sintaks untuk Stylus jauh lebih banyak lagi. Menggunakan ekstensi file .styl, Stylus menerima sintaks CSS standar, tetapi juga menerima beberapa variasi lain di mana tanda kurung, titik dua, dan titik dua adalah opsional. Sebagai contoh:

/* style.styl */
h1 {
  color: #0982C1;
}

/* omit brackets */
h1
  color: #0982C1;

/* omit colons and semi-colons */
h1
  color #0982C1

Menggunakan variasi yang berbeda dalam stylesheet yang sama juga valid, jadi berikut ini akan dikompilasi tanpa kesalahan.

1	h1 {
2	color #0982c1
3	}
4	h2
5	font-size: 1.2em

Variabel

Variabel dapat dideklarasikan dan digunakan di seluruh stylesheet. Mereka dapat memiliki nilai apa pun yang merupakan nilai CSS (misalnya warna, angka [satuan termasuk], atau teks.), Dan dapat dirujuk di mana saja di seluruh stylesheet kami.

Sass

Variabel Sass ditambahkan dengan simbol $ dan nilai dan nama dipisahkan dengan titik koma, seperti halnya properti CSS.

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;

body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

LESS

Variabel LESS persis sama dengan variabel Sass, kecuali nama variabel yang ditambahkan dengan simbol @.

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;

body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

Stylus

Variabel-variabel stylus tidak memerlukan apa-apa untuk ditambahkan ke mereka, meskipun itu memungkinkan simbol $. Seperti biasa, titik koma akhir tidak diperlukan, tetapi tanda sama di antara nilai dan variabel. Satu hal yang perlu diperhatikan adalah Stylus (0.22.4) mengkompilasi jika kita menambahkan simbol @ ke nama variabel, tetapi tidak akan menerapkan nilai ketika direferensikan. Dengan kata lain, jangan lakukan itu.

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted

body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

CSS yang dikompilasi

Setiap file di atas akan dikompilasi ke CSS yang sama. Anda dapat menggunakan imajinasi Anda untuk melihat bagaimana variabel yang berguna dapat. Kami tidak perlu lagi mengubah satu warna dan harus mengetik ulang dua puluh kali, atau ingin mengubah lebar situs kami dan harus menggali sekitar untuk menemukannya. Berikut ini CSS setelah kompilasi:

1	body {
2	color: #0982c1;
3	border: 1px dotted #0982c1;
4	max-width: 1024px;
5	}

Bersarang

Jika kita perlu mereferensikan beberapa elemen dengan induk yang sama dalam CSS kita, itu bisa membosankan untuk terus menulis induk berulang-ulang.

section { 
  margin: 10px;
}
section nav { 
  height: 25px;
}
section nav a { 
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

Sebagai gantinya, dengan menggunakan preprocessor, kita dapat menulis selektor anak-anak di dalam tanda kurung orang tua. Juga, simbol & referensi pemilih induk.

Sass, LESS, & Stylus

Ketiga preprocessors memiliki sintaks yang sama untuk pemilih yang bersarang.

section {
  margin: 10px;

  nav {
    height: 25px;

    a {
      color: #0982C1;
  
      &amp;:hover {
        text-decoration: underline;
      }
    }
  }
}

CSS yang dikompilasi

Ini adalah CSS yang dikompilasi dari kode di atas. Ini persis sama seperti ketika kita mulai — betapa nyamannya!

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

Mixin

Mixins adalah fungsi yang memungkinkan penggunaan kembali properti di seluruh stylesheet kami. Daripada harus pergi ke seluruh stylesheet dan mengubah properti beberapa kali, sekarang kita dapat mengubahnya di dalam mixin kami. Ini dapat benar-benar berguna untuk styling khusus dari elemen dan awalan vendor. Ketika mixin dipanggil dari dalam pemilih CSS, argumen mixin dikenali dan gaya di dalam mixin diterapkan ke pemilih.

Sass

/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  @include error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

LESS

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus

/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

CSS yang dikompilasi

Semua preprocessors dikompilasi ke kode yang sama di bawah ini:

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

Pewarisan

Saat menulis CSS dengan cara lama, kita bisa menggunakan kode berikut untuk menerapkan gaya yang sama ke beberapa elemen sekaligus:

1	p,
2	ul,
3	ol {
4	/* styles here */
5	}

Ini berfungsi dengan baik, tetapi jika kita perlu untuk lebih lanjut menata elemen secara individual, pemilih lain harus dibuat untuk masing-masing dan itu dapat dengan cepat menjadi lebih berantakan dan lebih sulit untuk dipertahankan. Untuk mengatasi ini, pewarisan dapat digunakan. Warisan adalah kemampuan untuk pemilih CSS lainnya untuk mewarisi sifat pemilih lain.

Sass & Stylus

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  @extend .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

CSS yang dikompilasi (Sass & Stylus)

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

LESS

LESS tidak benar-benar mendukung gaya mewarisi seperti Sass dan Stylus. Alih-alih menambahkan beberapa pemilih ke satu set properti, ia memperlakukan warisan seperti mixin tanpa argumen dan mengimpor gaya ke pemilih mereka sendiri. Kelemahan untuk ini adalah bahwa properti diulang dalam stylesheet dikompilasi Anda. Beginilah cara Anda menyiapkannya:

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

CSS yang dikompilasi (LESS)

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

Seperti yang Anda lihat, gaya dari .block dimasukkan ke pemilih yang ingin kami beri warisan. Penting untuk dicatat bahwa prioritas dapat menjadi masalah di sini, jadi berhati-hatilah.

Pengimporan

Dalam komunitas CSS, mengimpor CSS disukai karena memerlukan beberapa permintaan HTTP. Namun, mengimpor dengan preprocessor bekerja secara berbeda. Jika Anda mengimpor file dari salah satu dari tiga preprocessors, itu benar-benar akan memasukkan impor selama kompilasi, hanya menciptakan satu file. Harap diingat bahwa mengimpor file .css biasa dikompilasi dengan file @import "file.css" default; Kode. Juga, mixin dan variabel dapat diimpor dan digunakan dalam stylesheet utama Anda. Impor membuat pembuatan file terpisah untuk organisasi sangat bermanfaat.

Sass, LESS, & Stylus

1	/* file.{type} */
2	body {
3	background: #EEE;
4	}

@import "reset.css";
@import "file.{type}";

p {
  background: #0982C1;
}

CSS yang dikompilasi

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

Fungsi Warna

Fungsi warna dibangun dalam fungsi yang akan mengubah warna pada kompilasi. Ini bisa sangat berguna untuk membuat gradien, warna warna yang lebih gelap, dan banyak lagi.

Sass

lighten($color, 10%); /* returns a color 10% lighter than $color */
darken($color, 10%);  /* returns a color 10% darker than $color */

saturate($color, 10%);   /* returns a color 10% more saturated than $color */
desaturate($color, 10%); /* returns a color 10% less saturated than $color */

grayscale($color);  /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color);     /* returns inverted color of $color */

mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */

Ini hanya daftar pendek dari fungsi warna yang tersedia di Sass, daftar lengkap fungsi warna Sass yang tersedia dapat ditemukan dengan membaca Dokumentasi Sass.

Fungsi warna dapat digunakan di mana saja bahwa warna adalah CSS yang valid. Inilah contohnya:

$color: #0982C1;

h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

LESS

lighten(@color, 10%); /* returns a color 10% lighter than @color */
darken(@color, 10%);  /* returns a color 10% darker than @color */

saturate(@color, 10%);   /* returns a color 10% more saturated than @color */
desaturate(@color, 10%); /* returns a color 10% less saturated than @color */

spin(@color, 10);  /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */

mix(@color1, @color2); /* return a mix of @color1 and @color2 */

Daftar semua fungsi LESS dapat ditemukan dengan membaca Dokumentasi LESS.

Berikut ini contoh cara menggunakan fungsi warna dalam LESS:

@color: #0982C1;

h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

Stylus

lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */

saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */

Daftar lengkap semua fungsi warna Stylus dapat ditemukan dengan membaca Dokumentasi Stylus.

Berikut ini contoh menggunakan fungsi warna Stylus:

color = #0982C1

h1
  background color
  border 3px solid darken(color, 50%)

Operasi

Melakukan matematika dalam CSS cukup bermanfaat, dan sekarang sepenuhnya mungkin. Ini sederhana dan ini adalah bagaimana melakukannya:

Sass, LESS, & Stylus

1	body {
2	margin: (14px/2);
3	top: 50px + 100px;
4	right: 100px - 50px;
5	left: 10 * 10;
6	}

Aplikasi praktis

Kami telah membahas banyak fitur dan hal-hal baru yang dapat dilakukan oleh preprosesor, tetapi kami belum membahas apa pun secara langsung atau praktis. Berikut adalah daftar singkat aplikasi dunia nyata di mana menggunakan preprocessor adalah penyelamat kehidupan.

Vendor Prefiks

Ini adalah salah satu alasan yang dikaburkan untuk menggunakan preprocessor dan untuk alasan yang sangat baik — menghemat banyak waktu dan air mata. Membuat mixin untuk menangani awalan vendor mudah dan menghemat banyak pengulangan dan penyuntingan yang menyakitkan. Inilah cara melakukannya:

Sass

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

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

LESS

.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}

div {
  .border-radius(10px);
}

Stylus

border-radius(values) {
  -webkit-border-radius: values;
     -moz-border-radius: values;
          border-radius: values;
}

div {
  border-radius(10px);
}

CSS yang dikompilasi

div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

Teks 3D

Memalsukan teks 3D menggunakan banyak text-shadows adalah ide yang cerdas. Satu-satunya masalah adalah mengubah warna setelah fakta itu sulit dan tidak praktis. Menggunakan fungsi mixins dan warna, kita dapat membuat teks 3D dan mengubah warna dengan cepat!

Sass

1	@mixin text3d($color) {
2	color: $color;
3	text-shadow: 1px 1px 0px darken($color, 5%),
4	2px 2px 0px darken($color, 10%),
5	3px 3px 0px darken($color, 15%),
6	4px 4px 0px darken($color, 20%),
7	4px 4px 2px #000;
8	}
9
10	h1 {
11	font-size: 32pt;
12	@include text3d(#0982c1);
13	}

LESS

1	.text3d(@color) {
2	color: @color;
3	text-shadow: 1px 1px 0px darken(@color, 5%),
4	2px 2px 0px darken(@color, 10%),
5	3px 3px 0px darken(@color, 15%),
6	4px 4px 0px darken(@color, 20%),
7	4px 4px 2px #000;
8	}
9
10	span {
11	font-size: 32pt;
12	.text3d(#0982c1);
13	}

Stylus

1	text3d(color)
2	color: color
3	text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
4	span
5	font-size: 32pt
6	text3d(#0982c1)

Saya memilih untuk menulis stylus text-shadows pada satu baris karena saya menghilangkan tanda kurung kurawal.

CSS yang dikompilasi

1	span {
2	font-size: 32pt;
3	color: #0982c1;
4	text-shadow: 1px 1px 0px #097bb7,
5	2px 2px 0px #0875ae,
6	3px 3px 0px #086fa4,
7	4px 4px 0px #07689a,
8	4px 4px 2px #000;
9	}

Hasil akhir

Kolom

Menggunakan operasi angka dan variabel untuk kolom adalah ide yang saya temukan ketika saya pertama kali bermain dengan CSS preprocessors. Dengan menyatakan lebar yang diinginkan dalam variabel, kita dapat dengan mudah mengubahnya di jalan tanpa matematika mental. Begini caranya:

Sass

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;

body {
  margin: 0 auto;
  width: $siteWidth;
}
.content {
  float: left;
  width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
  float: left;
  margin-left: $gutterWidth;
  width: $sidebarWidth;
}

LESS

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;

body {
  margin: 0 auto;
  width: @siteWidth;
}
.content {
  float: left;
  width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
  float: left;
  margin-left: @gutterWidth;
  width: @sidebarWidth;
}

Stylus

siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;

body {
  margin: 0 auto;
  width: siteWidth;
}
.content {
  float: left;
  width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
  float: left;
  margin-left: gutterWidth;
  width: sidebarWidth;
}

CSS yang dikompilasi

body {
  margin: 0 auto;
  width: 1024px;
}
.content {
  float: left;
  width: 704px;
}
.sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}

Kebiasaan Penting

Ada beberapa permainan kata-kata untuk menggunakan preprocessor CSS. Saya akan membahas beberapa yang menyenangkan, tetapi jika Anda benar-benar tertarik untuk menemukan mereka semua, saya sarankan Anda menjelajahi dokumentasi atau, lebih baik lagi, mulailah menggunakan preprocessor dalam koding harian Anda.

Pelaporan Kesalahan

Jika Anda telah menulis CSS untuk jumlah waktu yang layak, saya yakin Anda telah mencapai titik di mana Anda mengalami kesalahan di suatu tempat dan tidak dapat menemukannya. Jika Anda seperti saya, Anda mungkin menghabiskan sore hari menarik rambut Anda dan mengomentari berbagai hal untuk memburu kesalahan.

Kesalahan laporan prapemrosesan CSS. Hanya sesederhana itu. Jika ada yang salah dengan kode Anda, ini memberi tahu Anda di mana, dan jika Anda beruntung: mengapa. Anda dapat melihat posting blog ini jika Anda tertarik untuk melihat bagaimana kesalahan dilaporkan dalam preprocessors yang berbeda.

Komentar

Saat meng-compile dengan preprocessor CSS, komentar double-slash akan dihapus (mis. // comment) dan komentar slash-asterisk tetap ada (mis. / * Komentar * /). Dikatakan demikian, gunakan double-slash untuk komentar yang Anda inginkan pada sisi non-dikompilasi dan slash-asterisk untuk komentar yang Anda inginkan terlihat setelah kompilasi.

Sekadar catatan: jika Anda mengkompilasi ulang, semua komentar akan dihapus.

Kesimpulan

Setiap pra-prosesor CSS yang kami bahas (Sass, LESS, dan Stylus) memiliki cara uniknya sendiri untuk menyelesaikan tugas yang sama — memberikan kemampuan kepada pengembang untuk menggunakan fitur yang berguna dan tidak didukung sekaligus menjaga kompatibilitas browser dan kebersihan kode.

Meskipun bukan merupakan persyaratan untuk pengembangan, preprosesor dapat menghemat banyak waktu dan memiliki beberapa fitur yang sangat berguna.

Saya mendorong Anda semua untuk mencoba sebanyak mungkin preprocessors sehingga Anda dapat secara efektif memilih favorit dan tahu mengapa itu disukai atas banyak orang lain. Jika Anda belum mencoba menggunakan preprocessor untuk menulis CSS Anda, saya sangat menyarankan Anda mencobanya.

Apakah Anda memiliki fitur preprocessor CSS favorit yang tidak saya sebutkan? Adakah sesuatu yang bisa dilakukan orang lain? Beri tahu kami di komentar di bawah ini!

Terima kasih khusus kepada Karissa Smith, teman saya yang sangat berbakat yang membuat thumbnail pratinjau untuk artikel ini.