SASS

Menulis CSS Menggunakan SASS, lebih cepat dan terstruktur.

Selamat Datang di Buatini

Syntax Include di Sass Include digunakan untuk menggunakan elemen mixin yang telah didefinisikan. Dibawah ini adalah contoh penggunaan include untuk memanggil mixin yang sudah di definisikan sebelumnya di halaman Belajar Sass : Mendefinisikan Style Dengan Mixin. .halaman-error { @include error; } div { text-align: center; @include border-warna (#999999, 5px); } Hasilnya setelah di compile akan … Continue reading Belajar Sass : Syntax Include, Memanggil Mixin Yang Telah Didefinisikan

Baca selengkapnya
Dalam Kategori :

Dengan menggunakan @mixin kamu dapat mendefinisikan styles, mirip seperti method atau function di bahasa pemprograman, dengan menaruh style di mixin sewaktu-waktu kamu bisa panggil element mixin tersebut ketika dibutuhkan menggunakan syntax @include. Dibawah ini adalah contoh mendefinisikan mixin dengan nama ‘error’. @mixin error { border-color: red; background-color: #0A0A0A; font-size: 20px; } //contoh mixin menggunakan argumen … Continue reading Belajar Sass : Mendefinisikan Style Dengan Mixin

Baca selengkapnya
Dalam Kategori :

Sass memiliki 7 jenis type data, type data tersebut adalah tipe data yang biasa dijumpai di CSS, namun ada beberapa type data yang hanya digunakan di Sass, adalah Boolean, Null dan Maps, type data ini berhubungan dengan penggunaan fungsi yang ada di Sass. Number Dari namanya kita sudah bisa menebak kalau type data ini digunakan … Continue reading Belajar Sass : Tipe Data Yang Ada Di Sass

Baca selengkapnya
Dalam Kategori :
Belajar Sass : Operasi Pada Sass

Belajar Sass : Operasi Pada Sass

Ditulis oleh Andi Pratama

pada

Number Operations Sass dapat melakukan operasi aritmatika pada type data berupa number, kamu bisa melakukan pertambahan (+), pengurangan (-), pengkalian (*), pembagian (/) dan juga modulus (%). Berikut adalah contohnya $font: 20px; p { font-size: $font – 10; //menggunakan variable padding: 20px + 2px * 2 ; margin: (20px + 2px) * 2; //menggunakan parentheses … Continue reading Belajar Sass : Operasi Pada Sass

Baca selengkapnya
Dalam Kategori :

Dengan syntax interpolation #{} kamu bisa menggunakan variable untuk memberi nama pada selector dan property. $selector: alert; $property: border; .#{$selector}-info { #{$property}-color: #6699FF; } Hasil setelah di compile akan seperti dibawah .alert-info { border-color: #6699FF; } Kamu juga bisa menggunakan interpolasi untuk memberi nilai pada property, ini bertujuan agar pernyataan yang ditulis di compile sebagai … Continue reading Belajar SASS : Fungsi Syntax Interpolation #{}

Baca selengkapnya
Dalam Kategori :

Dengan Sass kamu bisa menyarangkan selector dengan selector lain, artinya kamu bisa menulis selector di dalam tanda kurawal-nya ({}) selector lain. Nested rules akan mempermudah kerja kamu dalam melakukan parenting. Berikut contoh kode yang menerapkan nested rules. .area-komentar { background-color: #BABABA; p { color: #202020; } } Kita lihat kode diatas dimana kita telah melakukan … Continue reading Belajar SASS : Nested Rules, Menyarangkan Selector Dengan Selector

Baca selengkapnya
Dalam Kategori :
Belajar Sass : Nested Property

Belajar Sass : Nested Property

Ditulis oleh Andi Pratama

pada

Selain menyarangkan selector/rules, dengan Sass, kamu juga dapat menyarangkan properti dengan sub propertinya. Untuk lebih jelasnya bisa lihat contoh dibawah, dimana kita menyarangkan properti border dengan sub propertinya. .kontak-penulis { border: { color: #000; width: 1px; style: solid; radius: 20px; } //contoh lain font: { weight: bolder; size: 20px; } } Maka hasil ketika di … Continue reading Belajar Sass : Nested Property

Baca selengkapnya
Dalam Kategori :

Sass menyediakan directive @for untuk melakukan perulangan. Ada dua jenis perulangan ini, yaitu yang menggunakan to ($var from <nilai awal> to <nilai akhir&gt) dan through ($var from <nilai awal> through <nilai akhir&gt). Berikut adalah contoh perulangan yang dimulai dari angka 1 – 10 menggunakan to. @for $var from 1 to 10 { .teks-#{$var} { font-size: … Continue reading Belajar Sass : Syntax for Untuk Perulangan

Baca selengkapnya
Dalam Kategori :
Belajar Sass : Logika if di Sass

Belajar Sass : Logika if di Sass

Ditulis oleh Andi Pratama

pada

Dengan fungsi directive @if, kamu bisa melakukan pengujian terhadap suatu kondisi. Hampir sama dengan fungsi if di kebanyakan bahasa pemprograman, if di Sass support terhadap oprator pembanding seperti >, =,

Baca selengkapnya
Dalam Kategori :

Fitur Sass SASS adalah salah satu ekstensi CSS yang menambahkan fitur syntax kedalamnya. SASS memungkinkan kamu menggunakan variable, menulis selector dengan cara nested rules, melakukan mixing, mendefinisikan function dan lain-lain di CSS. Pengenalan Sass SASS merupakan akronim dari “Syntactically Awesome Stylesheets”, dengan menggunakan SASS kamu bisa menulis CSS lebih cepat dan lebih terstruktur dengan bantuan … Continue reading Belajar Sass : Apa Itu Ekstensi SASS di CSS dan Cara Menggunakannya?

Baca selengkapnya
Dalam Kategori :
Belajar SASS : Menggunakan Variable

Belajar SASS : Menggunakan Variable

Ditulis oleh Andi Pratama

pada

Variable di SASS ditandai dengan tanda dolar ($), cara mendeklarasikannya sama seperti memberi nilai pada properti di CSS.   $ukuran-teks: 20px; p { font-size: $ukuran-teks; }   hasil compile kode diatas adalah sebagai berikut.   p { font-size: 20px; }     Global Variable   Variable tidak hanya bisa digunakan di dalam sarang dimana variable … Continue reading Belajar SASS : Menggunakan Variable

Baca selengkapnya
Dalam Kategori :

Install Sass Melalui Ruby Pastikan komputer kamu sudah terinstall Ruby, jika belum maka install Ruby terlebih dahulu. Lalu buka terminal dan ketikan perintah dibawah untuk meng-install SASS. gem install sass Setelah selesai maka kamu bisa menggunakan SASS dengan mengetikan perintah sass di terminal, untuk melihat dokumentasi lengkapnya silahkan ketikan perintah dibawah. sass –help Melakukan Compile … Continue reading Belajar SASS : Cara Install SASS Melalui Gems Ruby

Baca selengkapnya
Dalam Kategori :

Dengan lebih dari 1 juta kali unduhan, anti virus AVG PRO khususnya untuk versi mobile, bukanlah aplikasi-aplikasi yang hanya menawarkan perlindungan terhadap spyware yang dapat menginfeksi smartphone kamu, tetapi juga dapat menjadikan ponsel pintar kamu dapat dikendalikan secara jarak jauh (remote control) , salah satunya dengan menggunakan pesan singkat SMS. Pakai SMS? bisakah? tentu bisa. … Continue reading Cara Mengunci Smartphone Menggunakan Pesan Singkat SMS

Baca selengkapnya
Dalam Kategori :

Spinner, salah satu komponen website yang sedang populer. Menunggu situs untuk melakukan load halaman tentu sangat membosankan, solusinya adalah dengan menambahkan animasi loading dengan spinner ini. Spinner juga bisa ditemukan di beberapa framework, misalnya di framework MDL.   Spinner yang kali ini saya buat adalah spinner yang dibuat menggunakan CSS3. Dengan adanya pembaharuan CSS yaitu … Continue reading Membuat Spinner Sederhana Untuk Loading Di CSS3

Baca selengkapnya
Dalam Kategori :

Kenapa adobe premier? karena Adobe Premier adalah aplikasi editing video yang memiliki fungsi Drag and Drop dengan demikian Adobe Premier adalah aplikasi yang mudah di pelajari ditambah lagi dengan tool yang tidak begitu rumit (sering menggunakan tools yang sama).   Efek-efek / animasi-animasi yang berada di Adobe Premier juga lengkap (Slide, Random Bar, Fade, dll) … Continue reading Alasan Kenapa Adobe Premier Adalah Aplikasi Editing Video Bagi Pemula

Baca selengkapnya
Dalam Kategori :

Kamu suka dengan dengan produk dalam negeri? Jika iya, tak ada salahnya Kamu mencoba aplikasi chatting karya anak bangsa Indonesia, liteBIG Messenger. Aplikasi ini tak berbeda jauh dengan aplikasi chatting yang sudah populer, seperti WhatsApp, Line, dan BlackBerry Messenger. Hanya saja, aplikasi ini memiliki sejumlah fitur yang sepertinya tidak ditemukan pada aplikasi sejenis. Aplikasi ini bisa … Continue reading LiteBIG, Aplikasi Chatting Karya Anak Bangsa

Baca selengkapnya
Dalam Kategori :

Pengertian Semantic Element HTML5   Semantic element dalam bahasa Indonesia berarti “arti dari sebuah element”, adalah tag-tag yang menjelaskan secara spesifik fungsi dari tag tersebut, dengan menggunakan semantic element, developer lebih mudah mengetahui isi konten dari element yang dipakai, perbedaan semantic dan non-semantic element adalah sebagai berikut :   Nama dari element semantic mendeskripsikan fungsi … Continue reading Element Semantic Dan Yang Baru Di HTML5

Baca selengkapnya
Dalam Kategori :
Berlangganan Lewat Email