Saturday, 16 January 2016

Sas & Compass : Media queris cara yang sederhana

Kecuali ada sebab bagus untuk tidak menggunakannya, saya percaya semua website akan dibangun responsively. Dalam istilah CSS, ini khususnya melibatkan menulis banyak media queries untuk berakpoints yang berbeda di dalam sebuah desing, Sebagai contoh, untuk mengubah typography pada lebar viewport/perangkat tertentu Anda mungkin menulis kode CSS berikut :

@media only screen and (min-width: 280px) and (max-width: 479px) {
.h1 {
font-size: 1.1em;
}
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
.h1 {
font-size: 1em;
}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
.h1 {
font-size: 0.9em;
}
}


Rangkaian kode sebuah ukuran font yang berbeda pada elemen h1 tergantung pada lebar layar dalam pixel. Secara personal, saya berpikir ini agak bertele-tele dan banyak untuk mengingat.

Dengan Sass, sebaliknya, kita dapat mungkin untuk melakukan ini :

h1 {
@include MQ(XS) {
font-size: 1.1em;
}
@include MQ(S) {
font-size: 1em;
}
@include MQ(M) {
font-size: 0.9em;
}
}


Sebuah variable didefinisikan untuk XS, S, dan M dan sebaganya (masing-masing mempunyai nilai lebar). Nilai dari variable adalah kemudian digunakan di dalam mixin yang disebuh MQ. Menggunakan mixin MQ itu, media queries dapat ditempatkan mudah dimanapun mereka dibutuhkan, bisa dibilang membuatnya mudah untuk dimengerti dimana mereka sedang diaplikasikan di dalam kode.

No comments:

Post a Comment