sass

Sass (Syntactically Awesome StyleSheets)

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Startup Framework (Image)
Sass kepanjangan dari (Syntactically Awesome StyleSheets) adalah extension dari css yang mempunyai kelebihan dari css biasa. Sass memungkinkan anda untuk coding dengan menggunkan variable, nested rules (Nesting),Mixins, Inline Import, partials dan banyak lagi. Dengan sass membantu untuk stylesheet besar terorganisir dengan baik, yang akan membuat stylesheet lebih cepat. terutama dengan bantuan library compass.

Fitur pada sass

* kompatible css 3 dengan sepenuhnya.
* ekstensi bahasa seperti Variable, nesting dan mixin
* banyak fungsi yang berguna untuk memanipulasi warna dan nilai-nilai lain
* memiliki fungsi lebih seperti kontrol untuk Libraries
* format output yang yang bagus.

Sintaks

ada 2 syntax tersedia pada sass
yang pertama dikenal sebagai SCSS (Sassy CSS)  ini merupakan sintaks asli dari css3, yang digunakan sama persis lengkap dengan kurung kurawal untuk membungkus code dan disetiap penulisan value selalu diakhiri dengan titik koma, penulisan sintaks seperti ini disebut dengan scss, dan semua sintaks ini disimpan dalam file berekstensi .scss. kedua disebut dengan indented Syntax, yang dikenal sebagai sintaks (menjorok) menjadikan cara yang lebih ringkas dalam penulisan css, ini berbeda dengan penulisan css biasanya yang menggunakan kurung kurawal {} dan titik koma dalam setiap akhir sintaks nya, sintaks seperti ini  mesti digunakan dalam file berekstensi .sass .

Ekstensi CSS

  • Variabel

seperti halnya pada bahasa pemrograman, Variabel pada sass sama diperuntukan untuk menyimpan informasi yang bisa digunaan kembali dalam penggunaan stylesheet. Variabel dapat digunakan untuk menyimpan value warna, ukurn font atau value css yang dianggap untuk digunakan kembali. untuk mengunakan Variabel pada sass dengan menggunakan simbol “$” , berikut contoh dari Variabel:

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

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

ketika sass diproses, Variabel mendefinisikan untuk $font-stack dan $primary, dan output berikut akan ditempatkan pada .css. dan ini akan memudahkan ketika ada beberpa class yang menggunakan valiable yang sama dan pada saat yang cepat ingin mengganti value dari Variabel itu sendiri, dengan menggunakan Variabel hanya sekali untuk mengganti value dan semua akan berubah secara cepat.

  • Nesting

Anda mengetahui penulisan dalam html memiliki hirarki struktur yang bersarang, tidak seperti penulisan dalam css, akan tetapi dengan menggunakan sass memungkinkan melakukan penulisan css dengan gaya bersarang atau yang disebut Nested. berikut contoh penggunaan nesting.

nav{
     ul{
          margin-top: 18px;
               li{
                    list-style: none;
                    float: left;
                    a{
                         color: #cccccc;
                    }

                    &.active{
                         a i{
                              color: #C00000
                         }
                    }
               }
          }
     }

disini kita lihat selectors yang bersarang lebih mudah dalam penulisan selector karena lebih tersusun, dengan adanya hirarki nesting. code berikut akan menghasilkan struktur seperti berikut pada .css:

nav ul{
     margin-top: 18px;
}

nav ul li{
     list-style: none;
     float: left;
}

nav ul li.acrive a i{
     color: #C00000;
}

  • Partials

Dengan teknik partials kita bisa membuat file sass parsial yang terpisah yang berisi potongan code css yang dapat dimasukan kedalam file sass yang lain dengan kata lain dapat digunakan pada file sass lain. ini adalah cara yang bagus untuk modularize css dengan seperti ini akan lebih mudah untuk manage code.

Sebuah parsial adalah sebuah file bernama sass dengan menambahkan garis bawah pada penamaan filenya. contoh penamaan pada parsial :   _partial.scss garis bawah pada penamaan file tersebut memungkinkan untuk sass mengetahui bahwa file tersebut adalah file partial dan file tersebut tidak bisa dituliskan dengan file css. sass partial digunakan dengan  @import directive.

  • Import

Css memiliki opsi import yang memungkinkan anda bisa membagi code css lebih kecil, namun ada kelemahan bahwa setiap kali penggunaan import css, akan melakukan permintaan http lain, sass melakukan import tidak dengan request http , namun sass akan mengambil file yang ingin di import kedalam file yang sedang dikerjakan.
sebagai contoh anda memiliki beberapa file sass, _reset.scss dan main,scss kemudian anda ingin menginport file sass _reset.scss kedalam main.scss

// _reset.scss

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

/* main.scss */

@import 'reset';

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

Pada contoh diatas kita sedang mengimport file reset.scss kedalam main.scss , dalam pemanggilannya tidak perlu menyertakan extensi filenya sass akan melakukannya sendiri.

  • mixins

dalam penulisan code css3 ada hal yang sedikit membuat kita lelah, terutama dengan css3 dan prefiks vendor  yang ada. dengan mixin memungkinkan untuk membuat deklarasi css yang dapat digunakan kembali. kita dapat membuat nilai-nilai mixin yang lebih fleksibel. berikut adalah contoh mixin untuk membuat 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 penamaan mixin nya sendiri diberinama mixin border-radius, disitu disimpan varible radius ($radius), kemudian isi dari mixin border radius itu adalah frefix dari border rasius yang diberi variable radius yang nantinya bisa fleksibel untuk pemberian valuenya.
dengan pemanggilan seperti contoh diatas jika digenerate akan menghasilkan code css seperti berikut:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;}
  • Extend/Inheritance

ini adalah fitur yang yang paling berguna dari sass, dengan menggunakan @extend memungkinkan berbagi satu set properti Css dari selector yang lain. karena sass membantu code kita untuk tidak melakukan DRY (don’t repeat Yourself).
lihat contoh dibawah:

.success {
  @extend .message;
  border-color: green;}

.error {
  @extend .message;
  border-color: red;}

.warning {
  @extend .message;
  border-color: yellow;}

jika dalam penulisan css class succes, error, warning akan digabung dalam satu penamaan kelas seperti berikut:

.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

melakukan perhitungan dalam css bisa lebih membantu anda untuk code stylesheet, sass memiliki operator standar seperti +, -, *, / dan % . perhatikan contoh dibawah:

.container { width: 100%; }

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

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

dalam contoh diatas, membuat fluid grid dengan sangat sederhana dengan menggambil dari lebar container 960px dan mengubahnya kedalam nilai persentase, maka css yang dihasilkan akan seperti beriut:

.container {
  width: 100%;}

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

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

Kesimpulan

Sass kependekan dari Syntactically Awesome Stylesheet yang dibuat oleh Hampton Catlin adalah sebuah Css Preprocessors yang mengenalkan konsep variabel, Mixin, nesting dan banyak lagi dalam penggunaanya. dengan konsep seperti itu membuat css lebih menarik dan lebih dinamis.

Sekian dulu pengenalan untuk materi sass nantikan materi selanjutnya yang akan membahas tentang cara install dan memulai project dengan Sass silahkan Subcribe dengan e-mail anda untuk berlangganan materi terbaru.
Terima Kasih.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn