Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan Belajar cara menggunakan variable Pada SASS (Syntactically Awesome StyleSheets), Sebelumnya apa sih SASS, SASS adalah sebuah pengembangan dari CSS3 dengan menambahkan nested rules, variables, mixins, selector
inheritance, dan banyak lagi. dia menerjemahkan css dengan struktur yang lebih baik.
Nah pada kesempatan ini kita akan bahas tentang cara menggunakan variablenya, penulisan variable di SASS adalah sebagai berikut :
|
1 |
$width: 5em; |
Nah bagai mana cara menuliskan nya?
misalkan kita punya sebuah area id bernama content, lalu kita atur cssnya dengan SASS jadi seperti berikut :
|
1 2 3 4 |
#content { $width: 10em !global; width: $width; } |
kita membuat variable width dengan nilai 10em !global, itu berarti variable width dapat kita gunakan berkali-kali di element yang berbeda-beda, contohnya seperti berikut :
|
1 2 3 4 5 6 7 8 |
#content { $width: 10em !global; width: $width; } #welcome { width: $width; } |
nah variable yang tadi kita buat global pada id content dapat kita gunakan lagi pada id wecome,
oke cukup jelas ya, untuk penjelasan Cara Menggunakan Variable Pada SASS (Syntactically Awesome StyleSheets) cukup sekian dulu tutorial kali ini, semoga bermanfaat.
terimakasih