Tutorial Sass Membina vCard dalam talian dengan Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribbble
 
 
 
 

Seperti yang anda lihat di atas, identiti sosial yang termasuk dalam 'sosial'seksyen disusun dalam unsur senarai supaya kami dapat dengan mudah memaparkannya secara bersebelahan. Setiap daripada mereka diberi nama kelas mengikut konvensyen ini sosial-facebook, sosial-twitter, sosial-google dan sebagainya.

Konfigurasi Kompas

Kita perlu mengkonfigurasi Compass sedikit dengan tidak mengulas beberapa baris dalam config.rb fail, seperti berikut:

 # Anda boleh memilih gaya keluaran pilihan anda di sini (boleh ditindih melalui baris arahan): output_style =: expanded # Untuk membolehkan laluan relatif ke aset melalui fungsi penolong kompas. Uncomment: relative_assets = true # Untuk melumpuhkan komen debug yang memaparkan lokasi asal seleksi anda. Uncomment: line_comments = false 

Jika anda tidak dapat mencari config.rb fail, anda mungkin tidak menjalankan arahan ini kompas panas dalam direktori projek anda.

Mengimport Fail

Oleh kerana kita akan menggunakan Kompas, kita perlu mengimportnya dengan menggunakan;

 @import "compass"; 

Dan itu adalah keutamaan saya untuk menetapkan semula gaya lalai dari pelayar supaya output akan diberikan lebih konsisten. Kompas, dalam kes ini, mempunyai modul Reset. Modul ini didasarkan pada tetapan CSS Eric Meyer dan boleh diimport menggunakan;

 @import "kompas / set semula"; 

Walau bagaimanapun, saya lebih suka menggunakan Normalize yang bersyukur juga terdapat dalam format Sass / Scss. Muat turun fail di sini, simpannya sass direktori kerja dan mengimportnya ke dalam helaian gaya kami.

 @import "normalkan"; 

Bacaan yang disyorkan: Meninjau Tahap Keutamaan Gaya CSS

Pembolehubah

Kami pasti akan mempunyai beberapa nilai tetap dalam lembaran gaya, oleh itu kami akan menyimpannya dalam pembolehubah dan kedua pembolehubah di bawah ini akan menentukan warna asas vCard kami.

 asas $: #fff; $ gelap: gelap ($ asas, 10%); 

Sementara lebar $ pembolehubah di bawah akan menjadi lebar halaman kami; ia juga akan menjadi asas untuk menentukan saiz elemen lain.

 $ lebar: 500px; $ ruang: $ width / 25; // = 20px 

Dan juga ruang $ pemboleh ubah, seperti yang anda lihat, akan menjadi jarak lalai atau saiz lajur dalam vCard kami yang dalam contoh ini akan menjadi 20px;

Kompas juga mempunyai Helpers untuk mengesan saiz imej dan kami akan menggunakan ciri ini pada profil gambar kami, seperti berikut;

 $ img: image-width ("me.jpg") + (($ space / 4) * 2); 

Tambahan Tambahan daripada (($ space / 4) * 2) dalam kod di atas, adalah untuk mengira lebar imej keseluruhan termasuk sempadan yang akan membingkai gambar. Bingkai secara amnya mempunyai dua sisi; atas dan bawah / kiri dan kanan, itulah sebabnya kita banyakkan hasil bahagian oleh 2.

Pewarisan Pemilih

Terdapat beberapa pemilih dalam lembaran gaya kami yang akan mempunyai peraturan gaya yang sama. Untuk mengelakkan pengulangan dalam kod kami, kami perlu menentukan gaya ini di tempat pertama dan mewarisi mereka dengan @extend arahan sekiranya diperlukan. Kaedah ini, dalam Sass, dikenali sebagai Pewarisan Pemilih, ciri yang sangat berguna yang hilang dalam KURANG.

 .float-left float: left;  .box-sizing @include box-sizing (border-box);  

Gaya

Apabila semua yang diperlukan adalah persediaan, maka sudah tiba masanya untuk menyusun vCard kami, bermula dengan warna latar belakang pada dokumen HTML kami;

 html ketinggian: 100%; warna latar belakang: asas $;  

vCard

Gaya berikut menentukan pembungkus vCard. Jika anda telah bekerja dengan KURANG sebelum ini, kod ini akan menjadi biasa kepada anda dan mudah dicerna.

 .vcard width: $ width; margin: 50px auto; warna latar belakang: gelap ($ asas, 5%); sempadan: 1px pepejal $ gelap; @include border-radius (3px); ul padding: 0; margin: 0; li senarai gaya: tiada;  

Lebar pembalut mewarisi nilai dari lebar $ pembolehubah. Warna latar belakang lebih gelap 5% dari warna asas, manakala warna sempadan akan lebih gelap oleh 10%. Pewarna ini dicapai menggunakan fungsi warna Sass.

VCard juga akan ada 3px jejari sudut bulat yang dicapai menggunakan Compass CSS3 Mixins; jejari sempadan (3px).

Seksyen Bio

Seperti yang telah kita ketahui pada awal tutorial ini, vCard boleh dibahagikan kepada dua bahagian. Gaya bersarang di bawah ini akan menentukan bahagian pertama yang mengandungi profil gambar dengan beberapa butiran (nama, e-mel dan telefon).

 .bio border-bottom: 1px solid $ dark; padding: $ space; @extend .box-sizing; img @extend .float-left; paparan: blok; sempadan: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-sizing; warna: gelap ($ asas, 50%); margin: left: $ space; bawah: $ space / 2;  lebar: $ lebar - (($ space * 3) + $ img); li &: before width: $ space; ketinggian: ruang $; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: sebelum kandungan: "f";  & .email: sebelum kandungan: "m";  &. telefon: sebelum kandungan: "N";  

Terdapat satu perkara dari kod di atas yang kami fikir anda perlu mengambil notis. Lebar dalam .terperinci pemilih ditentukan dengan persamaan ini $ lebar - (($ space * 3) + $ img);.

Persamaan ini digunakan untuk mengira detail secara dinamik lebar dengan menolak lebar profil gambar dan ruang (padding dan margin) dari lebar keseluruhan vCard.

Seksyen Sosial

Gaya di bawah adalah untuk bahagian kedua dalam vCard. Sebenarnya tiada perbezaan dengan CSS biasa di sini, hanya sekarang mereka bersarang, dan beberapa nilai ditakrifkan dengan pembolehubah.

 .sosial latar belakang-warna: $ gelap; lebar: 100%; padding: $ space; @extend .box-sizing; ul text-align: center; li display: block-inline; lebar: 32px; ketinggian: 32px; a text-decoration: none; paparan: blok dalam talian; lebar: 100%; ketinggian: 100%; teks-inden: 100%; ruang putih: sekarang; limpahan: tersembunyi;  

Dalam bahagian ini, kami akan memaparkan ikon media sosial menggunakan teknik sprite imej, dan Compass mempunyai ciri untuk melakukan pekerjaan itu dengan lebih cepat.

Pertama sekali, kita perlu meletakkan ikon kami dalam folder khas - mari nama folder itu / sosial /, sebagai contoh. Kembali dalam lembaran gaya, rujuk ikon tersebut dengan yang berikut @import peraturan.

 @import "sosial / *. png"; 

The sosial / di atas merujuk kepada folder di mana kami menyimpan ikon. Folder ini harus bersarang dalam folder imej. Sekarang, jika kita melihat di dalam folder imej kita, kita perlu melihat imej sprite yang dihasilkan dengan aksara rawak, seperti sosial-sc805f18607.png. Pada ketika ini, tiada apa pun yang tidak berlaku di bahagian hadapan, sehingga kami menggunakan gaya dengan baris berikut.

 @include all-social-sprites; 

Keputusan akhir

Akhirnya, selepas semua kerja keras kita dapat melihat hasil seperti ini:

Sekiranya kita berfikir bahawa 500px terlalu lebar kemudian, kita hanya perlu mengubah nilai masuk lebar $ pemboleh ubah - sebagai contoh, 350px - selebihnya akan “secara ajaib” diselaraskan. Anda juga boleh mencuba dengan pemboleh ubah warna.

• Lihat Demo
• Muat turun Sumber

Kesimpulannya

Dalam tutorial ini, kami telah menunjukkan kepada anda cara membina vCard dalam talian mudah dengan Sass dan Compass; Namun, ini adalah contoh. Sass dan Compass memang kuat, tetapi kadang-kadang tidak perlu. Contohnya, apabila kita bekerja di laman web dengan beberapa halaman dan mungkin juga hanya perlu sedikit gaya, menggunakan Sass dan Compass dianggap berlebihan.

Jawatan ini menutup siri Sass kami dan kami harap anda menikmatinya. Sekiranya anda mempunyai sebarang soalan mengenai subjek ini, jangan ragu untuk menambahnya di dalam kotak komen di bawah.