() translation by (you can also view the original English article)
Anda tahu masalahnya dengan cukup baik. Ingin memberikan beberapa bagian dari situs Anda sudut membulat situs dengan CSS3? Kemudian Anda memerlukan tiga awalan vendor: webkit, moz, dan formulir rekomendasi W3C. Bukankah itu membuang-buang waktu -- belum lagi ruang layar? Bagaimana jika, sebaliknya, kita bisa menggunakan file kelas? Yah, kita bisa! Akan saya tunjukkan caranya hari ini.
Kuncinya
Jika kita menggunakan alat seperti LESS atau SASS, kita bisa membuat file kelas kita sendiri dengan mudah. Tidak tahu apa yang saya bicarakan? Nah, pertama, tinjau tip cepat ini. Ini akan mengajarkan Anda bagaimana cara bersiap dan berlari dengan Less.
File Kelas
Selanjutnya, kita perlu membuat file kelas inti yang akan digunakan di setiap proyek. Jangan ragu untuk menyimpan file ini di manapun yang Anda inginkan, meskipun, di video di atas, saya menggunakan aplikasi Structurer populer (dan eksklusif) kami.
Kita akan melakukan yang pertama bersama, tapi pastikan untuk meninjau screencast untuk lebih jelasnya.
1 |
.border-radius( @radius: 3px ) { |
2 |
-webkit-border-radius: @radius; |
3 |
-moz-border-radius: @radius; |
4 |
border-radius: @radius; |
5 |
}
|
Dalam hal konvensi penamaan, saya telah menemukan bahwa paling pintar menggunakan nama yang direkomendasikan secara resmi untuk nama kelas Anda -- dalam hal ini, "border-radius". Untuk mendeklarasikan variabel dengan Less, kami mengatasinya dengan simbol @. Dalam kasus ini, kita menetapkan nilai default 3px, meskipun, jika kita perlu mengganti nilai itu dalam proyek kita, itu pasti mudah!
1 |
#someElement { |
2 |
.border-radius(10px);
|
3 |
}
|
Beberapa Contoh
Pada titik ini, cukup bilas dan ulangi untuk setiap properti yang membutuhkan banyak awalan vendor. Berikut beberapa hal untuk Anda memulai:
Box Shadow
1 |
.box-shadow( |
2 |
@x : 2px, |
3 |
@y : 2px, |
4 |
@blur : 5px, |
5 |
@spread : 0, |
6 |
@color : rgba(0,0,0,.6) |
7 |
) { |
8 |
-webkit-box-shadow: @x @y @blur @spread @color; |
9 |
-moz-box-shadow: @x @y @blur @spread @color; |
10 |
box-shadow: @x @y @blur @spread @color; |
11 |
}
|
Transition
1 |
.transition( |
2 |
@what : all, |
3 |
@length : 1s, |
4 |
@easing : ease-in-out |
5 |
) { |
6 |
-webkit-transition: @what @length @easing; |
7 |
-moz-transition: @what @length @easing; |
8 |
-o-transition: @what @length @easing; |
9 |
transition: @what @length @easing; |
10 |
}
|
Box
1 |
.box( |
2 |
@orient : horizontal, |
3 |
@pack : center, |
4 |
@align : center |
5 |
) { |
6 |
display: -webkit-box; |
7 |
display: -moz-box; |
8 |
display: box; |
9 |
|
10 |
-webkit-box-orient: @orient; |
11 |
-moz-box-orient: @orient; |
12 |
box-orient: @orient; |
13 |
|
14 |
-webkit-box-pack: @pack; |
15 |
-moz-box-pack: @pack; |
16 |
box-pack: @pack; |
17 |
|
18 |
-webkit-box-align: @align; |
19 |
-moz-box-align: @align; |
20 |
box-align: @align; |
21 |
}
|
Flex
1 |
.flex( @val : 1 ) { |
2 |
-webkit-box-flex: @val; |
3 |
-moz-box-flex: @val; |
4 |
box-flex: @val; |
5 |
}
|
Kesimpulan
Saya ingin mendengar pemikiran Anda tentang ini. Jika Anda menyukai idenya, mari kita meningkatkan lembar gaya ini.
