L O A D I N G
Profile image
  • Name

    Yudana
  • Title

    Website Developer
  • Phone

    -
  • Email

    me@yudana.com
  • Date of birth

    -
  • Age

    -
  • Residence

    Bali
  • Freelance Work

blog banner

Tutorial Sass Untuk Membuat CSS Lebih Terstruktur Dan Dinamis

sass

Sass (Syntactically Awesome StyleSheets) merupakan CSS pre-processor, esktensi dari CSS yang digunakan untuk menambah berbagai fitur daripada hanya sebagai style dari halaman web. Dengan Sass, kita bisa menambahkan variabel,  nested rules, mixins, inline imports, inheritance dan lain sebagainya, semuanya kompatibel dengan script CSS.

Berikut ini fitur dari Sass :

  • Stabil, powerfull dan tentunya kompatibel dengan semua versi CSS.
  • Merupakan peningkatan dari CSS dengan berbasiskan JavaScript.
  • Dikenal sebagai ‘pemanis’ untuk CSS, yang berarti bisa membuat cara yang lebih mudah untuk dibaca dan lebih cepat dimengerti.
  • Memakai kode sendiri kemudian di kompilasi untuk bisa dibaca sebagai CSS.
  • Kta bisa menulis kode CSS dengan kode lebih sedikit dan mempersingkat waktu.
  • Sebuah open source pre-processor, yang dienterpreter menjadi CSS.

Cara Instalasi Sass

Kita membutuhkan bahasa pemrograman Ruby untuk mengeksekusi file Sass, berikut ini cara instalasi Ruby :

  1. Download Ruby di sini : http://rubyinstaller.org/downloads/ (kebetulan saya memakai Windows 7)
  2. Kemudian install, sangat mudah untuk dilakukan.
  3. Tambahkan folder bin Ruby di PATH User Variable and System Variable untuk bekerja dengan perintah gem. Caranya :
    – Klik start, klik kanan di ‘Computer’
    – Kemudian pilih ‘Advanced system settings’
    – Klik ‘Environment Variables’
    – Pada user variables, jika tidak ada variable name di PATH bisa ditambah dengan klik ‘new’, jika sudah ada tinggal klik edit. Tambahkan value (C:\Ruby23\bin) sesuai dengan letak instalasi Ruby yang sudah dilakukan sebelumnya.
    user variable ruby
    – Kemudian di system variabel, tambahkan variable name : RubyOpt dan variable value : rubygems
    system variable ruby
  4. Kemudian buka command prompt untuk instalasi Sass, ketikan perintah gem install sass. Jika sukses, tampilannya akan seperti di bawah ini :
    gem install sass

Selamat! Kita telah sukses menginstall Sass, berikut ini contoh sederhana dari Sass.

Saya menaruh semua file di dalam folder C:\xampp\htdocs\belajar, buat folder sass untuk menampung semua file Sass yang akan dibuat.
Buat file html (HelloSass.html) :

<html>
    <head>
        <title>Contoh Sass</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <h1>Hello World</h1>
        <p>Lorem ipsum dolor sit amet...</p>
    </body>
</html>

Buat file Sass (style.scss) dan simpan di dalam folder sass :

$primaryColor: #ff0000;
h1{
   color: $primaryColor;
   font-size: 25px;
}

p{
   color: #4286f4;
   font-style: italic;
}

Kemudian kompilasi file scss diatas untuk diconvert menjadi css melalui command prompt dengan perintah :

sass C:\xampp\htdocs\belajar\sass\style.scss C:\xampp\htdocs\belajar\style.css

Sesuaikan dengan path tempat Ada menyimpan file.

Buka file HelloSass.html di web browser, maka Anda akan melihat halaman tersebut dengan style yang dibuat dengan Sass. Pada artikel selanjutnya saya akan menulis mengenai variabel, nested rules, mixins dan lainnya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *