Mengenal CSS Pre-Processor: SASS, LESS, dan Stylus

Preprocessor (pra pengolahan) yang merupakan cara lain dalam menuliskan kosakata CSS, penulisan menggunakan bahasa preproccesed (pra olah/mentah) dan kemudian dikonversi langsung kedalam bahasa CSS murni maupun tanpa dikonversi dengan menambahkan mesin side server agar browser mampu mengkonversinya. 

Seorang web developer, tidak peduli seberapa baru, dapat dipastikan akan bertemu dan menulis banyak kode CSS (Cascading StyleSheet). Pada implementasinya, penggunaaan preprocessor memiliki beberapa fitur. Dengan memperluas pola CSS dalam bentuk variabel, operator, interpolasi, fungsi, mixin dan masih banyak lagi. Dalam hal ini SASS, LESS dan Stylus adalah yang paling terkenal.

Mengapa CSS Preprocessor?

Sebenarnya CSS sudah sangat baik, tetapi CSS tidak memberikan kita kebebasan berekspresi dalam penulisannya. Salah satu tujuan dari CSS adalah untuk memberikan kemudahan dan kesederhanaan sehingga siapapun dapat dengan cepat menangkap bahasa yang digunakan dan mempelajarinya. Namun fokus tersebut justru membatasi apa yang lebih dapat dilakukan pengembang CSS, dan pada umumnya kita tidak menyukai keterbatasan. Kita membutuhkan variabel yang lebih luas, dan jika CSS tidak mampu memberikan variabel tersebut, kita akan mencari cara untuk membuat varibel yang lebih dekat dengan kebutuhan kita.

Preprosesor, dengan fitur canggihnya membantu menuliskan kode yang dapat digunakan kembali, dapat dikembangkan dan dapat diperluas lagi pada CSS. Selain itu, juga bermanfaat dalam meningkatkan produktivitas Anda, dan mengurangi jumlah kode yang Anda tulis dalam sebuah proyek.

Fitur CSS Preprocessor

Seperti bahasa pemrograman pada umumnya, pre-processor memiliki sintaks yang berbeda, tapi mendukung pengkodean CSS murni dan sintaksnya juga seperti CSS murni. SASS dan Stylus memiliki gaya tambahan. Di SASS, Anda bisa menghilangkan kurung kurawal dan titik koma, sedangkan di Stylus, Anda juga bisa menghilangkan titik dua. Ini adalah opsional di SASS dan Stylus.

Pada contoh di bawah ini, Anda dapat menemukan versi SASS, LESS dan Stylus dan output CSS.

Variable

Variabel adalah fitur yang paling dinginkan untuk sebuah CSS. Setiap pengembang, ingin mendefinisikan warna dasar dan menggunakannya di seluruh file CSS, sebagai pengganti menulis hex atau diberi nama warna di properti setiap saat. Selain halnya “warna”, variabel juga dapat digunakan untuk “width”, “font-size”, “font-family”, “border”, dll.

Variabel dalam SASS dimulai dengan $ sign, di LESS @ sign dan no prefix di Stylus. Keduanya dalam SASS dan LESS, nilai diberikan dengan titik dua (:), dan tanda sama dengan (=) pada Stylus.

$font-size: 16px;

div {
    font-size: $font-size;
}
@font-size: 16px;

div {
    font-size: @font-size;
}
font-size = 16px

div
    font-size font-size
div {
    font-size: 16px;
}

Nesting

CSS tidak memiliki hirarki visual saat bekerja dengan child selector. Dengan demikian Anda harus menuliskan selector dan kombinasinya dalam baris yang terpisah. Nesting memberikan hirarki visual seperti pada HTML guna meningkatkan keterbacaan. Dalam beberapa kasus, nesting menyebabkan oversize selector dan sesuatu seperti “selector train”, jadi gunakanlah dengan bijak.

$link-color: #999;
$link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: $link-color;

        &:hover {
            color: $link-hover;
        }
    }
}
@link-color: #999;
@link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: @link-color;

        &:hover {
            color: @link-hover;
        }
    }
}
link-color = #999
link-hover = #229ed3

ul
    margin 0
    li
        float left
    a
        color link-color
        &:hover
            color link-hover
ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }

 

Mixins

Mixins adalah kumpulan definisi yang dikompilasi sesuai dengan beberapa parameter atau aturan statis. Sehingga Anda dapat dengan mudah menulis gradien latar belakang lintas browser atau CSS arrows dll.

@mixin bordered($width) {
    border: $width solid #ddd;

    &:hover {
        border-color: #999;
    }
}

h1 {
    @include bordered(5px);
}
.bordered (@width) {
    border: @width solid #ddd;

    &:hover {
        border-color: #999;
    }
}

h1 {
    .bordered(5px);
}
bordered(w)
    border: n solid #ddd
    &:hover
        border-color: #999

h1
    bordered(5px)
h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }

Extends

Extends berguna untuk membagi definisi generik dengan selector daripada menyalinnya. Semua selector yang diperluas dikelompokkan dalam CSS yang dikompilasi. SASS memperluas setiap hal dari extends selector yang mencakup child selectors dan inherited properties. Namun, dalam LESS Anda dapat memilih setiap extended selector dengan menambahkan atribut “all” untuk memperluas metode atau Anda hanya dapat memilih main instance.

.block { margin: 10px 5px; }

p {
  @extend .block;
  border: 1px solid #eee;
}

ul, ol {
  @extend .block;
  color: #333;
  text-transform: uppercase;
}
.block { margin: 10px 5px; }

p {
  &:extend(.block);
  border: 1px solid #eee;
}

ul, ol {
  &:extend(.block);
  color: #333;
  text-transform: uppercase;
}
.block
    margin 10px 5px

p
    @extend .block
    border 1px solid #eee

ul
ol
    @extend .block
    color #333
    text-transform uppercase
.block, p, ul, ol { margin: 10px 5px; }

p { border: 1px solid #eee; }
ul, ol { color: #333; text-transform: uppercase; }

Color Operations 

Ketiga pre-processor ini memiliki fungsi untuk dimainkan dengan warna. Anda bisa meringankan warna dasar atau menjenuhkannya, bahkan Anda bisa mencampur dua atau lebih warna yang berbeda. Fitur ini tidak terlalu penting tapi bagus untuk dimiliki.

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
complement($color)
saturate(@color, @amount)
desaturate(@color, @amount)
lighten(@color, @amount)
darken(@color, @amount)
fadein(@color, @amount)
fadeout(@color, @amount)
fade(@color, @amount)
spin(@color, @amount)
mix(@color1, @color2, @weight)
grayscale(@color)
contrast(@color)
red(color)
green(color)
blue(color)
alpha(color)
dark(color)
light(color)
hue(color)
saturation(color)
lightness(color)

If/Else Statements

Dengan ekspresi dan instruksi pengendalian dapat membantu membangun definisi gaya yang serupa sesuai kondisinya atau variabel yang sesuai. SASS dan Stylus mendukung kondisi if/else. Tapi dalam LESS, Anda bisa mencapainya dengan CSS Guards.

@if lightness($color) > 30% {
    background-color: black;
}

@else {
    background-color: white;
}
.mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
    background-color: white;
}
if lightness(color) > 30%
    background-color black
else
    background-color white

Loops

Loop berguna saat iterasi melalui array atau menciptakan serangkaian gaya seperti pada lebar grid. Seperti dalam kasus if / else, LESS menggunakan CSS Guards dan rekursif mixin untuk perulangan.

@for $i from 1px to 3px {
    .border-#{i} {
        border: $i solid blue;
    }
}
.loop(@counter) when (@counter > 0){
    .loop((@counter - 1));

    .border-@{counter} {
        border: 1px * @counter solid blue;
    }
}
for num in (1..3)
    .border-{num}
        border 1px * num solid blue

Math

Operasi matematika dapat digunakan untuk konversi aritmatika atau unit konversi. SASS dan Stylus mendukung aritmatika antar unit yang berbeda. Selain matematika sederhana, pre-processor juga memiliki dukungan matematika yang kompleks seperti batas tertinggi, pembulatan, mendapatkan nilai min atau max dalam daftar dll.

1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5
1cm * 1em => 1cm * 1em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5in
1cm * 1em => 1 cm * em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 5.181in
3in / 2in => 1.5in

Imports

Memisahkan kode dalam potongan kecil sangat membantu untuk mengekspresikan deklarasi dan meningkatkan kemampuan atas kontrol basis kode. Anda dapat mengelompokkan potongan kode yang serupa di folder yang serupa dan mengimpornya ke file css utama. Juga dengan pernyataan import.

@import "library";
@import "mixins/mixin.scss";
@import "reset.css";
@import "library"
@import "mixins/mixin.less"
@import "reset.css"
@import "library"
@import "mixins/mixin.styl"
@import "reset.css"

Kesimpulan

Ketiga pre-processor CSS yang dijelaskan di sini kurang lebih memiliki fitur serupa. Jadi pilihlah sesuai dengan selera coding Anda dan mulailah menggunakannya di proyek berikutnya.

Share this article to

Leave a Reply

Your email address will not be published. Required fields are marked *