Home / Code / File-File Project Tutorial / Project / Tutorial

Tip Cepat: Jangan Pernah Mengetikkan Awalan Vendor Lagi

By Blok CC Post a Comment
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.

Berlangganan ke halaman YouTube kami untuk menonton semua video tutorial!

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
2
3
4
5
.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;  
}
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
2
3
#someElement {
   .border-radius(10px);
}
Advertisement

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

01
02
03
04
05
06
07
08
09
10
11
.box-shadow(
    @x : 2px,
    @y : 2px,
    @blur : 5px,
    @spread : 0,
    @color : rgba(0,0,0,.6)
) {
    -webkit-box-shadow: @x @y @blur @spread @color;
       -moz-box-shadow: @x @y @blur @spread @color;
            box-shadow: @x @y @blur @spread @color;
}

Transition

01
02
03
04
05
06
07
08
09
10
.transition(
    @what : all,
    @length : 1s,
    @easing : ease-in-out
) {
    -webkit-transition: @what @length @easing;
       -moz-transition: @what @length @easing;
         -o-transition: @what @length @easing;
            transition: @what @length @easing;         
}

Box

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
.box(
    @orient : horizontal,
    @pack : center,
    @align : center
) {
    display: -webkit-box;
       display: -moz-box;  
            display: box;
 
    -webkit-box-orient: @orient;
       -moz-box-orient: @orient;
            box-orient: @orient;
             
    -webkit-box-pack: @pack;
       -moz-box-pack: @pack;
            box-pack: @pack;       
             
    -webkit-box-align: @align;
       -moz-box-align: @align;
            box-align: @align;     
}

Flex

1
2
3
4
5
.flex( @val : 1 ) {
    -webkit-box-flex: @val;
       -moz-box-flex: @val;
            box-flex: @val;
}

Kesimpulan

Saya ingin mendengar pemikiran Anda tentang ini. Jika Anda menyukai idenya, mari kita meningkatkan lembar gaya ini.

No comments for "Tip Cepat: Jangan Pernah Mengetikkan Awalan Vendor Lagi"

Post a Comment