Sass Tutorial Membangun vCard Online dengan Sass & Compass

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

Seperti yang Anda lihat di atas, identitas sosial termasuk dalam 'sosial'Bagian disusun dalam elemen daftar sehingga kami dapat dengan mudah menampilkannya berdampingan. Masing-masing diberi nama kelas setelah konvensi ini sosial-facebook, sosial-twitter, sosial-google dan seterusnya.

Konfigurasi Kompas

Kita perlu mengkonfigurasi Compass sedikit dengan menghapus komentar beberapa baris di config.rb file, sebagai berikut:

 # Anda dapat memilih gaya keluaran pilihan Anda di sini (dapat ditimpa melalui baris perintah): output_style =: diperluas # Untuk mengaktifkan jalur relatif ke aset melalui fungsi pembantu pembantu. Batalkan komentar: relative_assets = true # Untuk menonaktifkan komentar debugging yang menampilkan lokasi asli pemilih Anda. Batalkan komentar: line_comments = false 

Jika Anda tidak dapat menemukan config.rb file, Anda mungkin belum menjalankan perintah ini kompas init di direktori proyek Anda.

Mengimpor File

Karena kita akan menggunakan Kompas, kita perlu mengimpornya menggunakan;

 @import "kompas"; 

Dan itu adalah preferensi pribadi saya untuk mengatur ulang gaya default dari browser sehingga hasilnya akan lebih konsisten. Kompas, dalam hal ini, memiliki modul Reset. Modul ini didasarkan pada reset CSS Eric Meyer dan dapat diimpor menggunakan;

 @import "kompas / reset"; 

Namun, saya lebih suka menggunakan Normalize itu untungnya juga datang dalam format Sass / Scss. Unduh file di sini, simpan di kelancangan direktori kerja dan impor ke dalam stylesheet kami.

 @ impor "normalisasi"; 

Bacaan yang Disarankan: Meninjau Tingkat Prioritas Gaya CSS

Variabel

Kami pasti akan memiliki beberapa nilai konstan dalam stylesheet, sehingga kami akan menyimpannya dalam variabel dan dua variabel di bawah ini akan menentukan warna dasar vCard kami.

 $ base: #fff; $ dark: darken ($ base, 10%); 

Selagi $ lebar variabel di bawah ini adalah lebar halaman kami; itu juga akan menjadi dasar untuk menentukan ukuran elemen lainnya.

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

Dan itu $ space variabel, seperti yang Anda lihat, akan menjadi jarak standar atau ukuran kolom di vCard kami yang dalam contoh ini akan menjadi 20px;

Kompas juga memiliki Pembantu untuk mendeteksi ukuran gambar dan kami akan menggunakan fitur ini pada profil gambar kami, sebagai berikut;

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

Ekstra Tambahan dari (($ space / 4) * 2) dalam kode di atas, adalah untuk menghitung lebar gambar total termasuk perbatasan yang akan membingkai gambar. Sebuah bingkai umumnya memiliki dua sisi; atas dan bawah / kiri dan kanan, itu sebabnya kami melipatgandakannya hasil pembagian oleh 2.

Warisan Pemilih

Tampaknya ada beberapa penyeleksi dalam stylesheet kami yang akan memiliki aturan gaya yang sama. Untuk menghindari pengulangan dalam kode kita, kita harus menentukan gaya ini di tempat pertama dan mewarisi mereka dengan @memperpanjang direktif kapan pun dibutuhkan. Metode ini, dalam Sass, dikenal sebagai Warisan Pemilih, fitur yang sangat berguna yang hilang dalam KURANG.

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

Gaya

Ketika semua yang diperlukan telah diatur, maka sekarang saatnya untuk merancang vCard kami, mulai dengan warna latar belakang ke dokumen HTML kami;

 html height: 100%; warna latar: $ base;  

vCard

Gaya berikut menentukan bungkus vCard. Jika Anda pernah bekerja dengan KURANG sebelumnya, kode ini akan familier bagi Anda dan mudah dicerna.

 .vcard width: $ width; margin: 50px otomatis; warna latar: gelap ($ base, 5%); border: 1px solid $ dark; @include border-radius (3px); ul padding: 0; margin: 0; li list-style: none;  

Lebar pembungkus mewarisi nilai dari $ lebar variabel. Warna latar belakang lebih gelap oleh 5% dari warna dasar, sedangkan warna tepi akan lebih gelap oleh 10%. Pewarnaan ini dicapai menggunakan fungsi warna Sass.

VCard juga akan memilikinya 3px jari-jari sudut bulat yang dicapai menggunakan Compass CSS3 Mixins; batas-radius (3px).

Bagian Bio

Seperti yang telah kita catat di awal tutorial ini, vCard dapat dibagi menjadi dua bagian. Gaya bersarang di bawah ini akan menentukan bagian pertama yang berisi profil gambar dengan beberapa detail (nama, email, dan telepon).

 .bio border-bottom: 1px solid $ dark; padding: $ space; @tambah .box-sizing; img @extend .float-left; display: blok; perbatasan: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @tambah .box-sizing; warna: gelap ($ base, 50%); margin: kiri: $ space; bawah: $ space / 2;  width: $ width - (($ space * 3) + $ img); li &: before width: $ space; tinggi: $ space; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: before content: "m";  & .phone: before content: "N";  

Ada satu hal dari kode di atas yang menurut kami perlu Anda perhatikan. Lebar dalam .detail pemilih ditentukan dengan persamaan ini $ width - (($ space * 3) + $ img);.

Persamaan ini digunakan untuk menghitung detail secara dinamis lebar dengan mengurangi lebar profil gambar dan spasi (bantalan dan margin) dari total lebar vCard.

Bagian Sosial

Gaya di bawah ini adalah untuk bagian kedua di vCard. Sebenarnya tidak ada perbedaan dengan CSS biasa di sini, hanya sekarang mereka bersarang, dan beberapa nilai didefinisikan dengan variabel.

 .social background-color: $ dark; lebar: 100%; padding: $ space; @tambah .box-sizing; ul text-align: center; li display: inline-block; lebar: 32px; tinggi: 32px; a text-decoration: none; display: inline-block; lebar: 100%; tinggi: 100%; indentasi teks: 100%; white-space: nowrap; overflow: disembunyikan;  

Pada bagian ini, kita akan menampilkan ikon media sosial menggunakan teknik sprite gambar, dan Kompas memiliki fitur untuk melakukan pekerjaan itu lebih cepat.

Pertama-tama, kita perlu meletakkan ikon kita di folder khusus - mari beri nama folder itu /sosial/, sebagai contoh. Kembali ke stylesheet, gabungkan ikon-ikon itu dengan yang berikut ini @impor aturan.

 @import "social / *. png"; 

Itu sosial/ di atas merujuk ke folder tempat kami menyimpan ikon. Folder ini harus bersarang di dalam folder gambar. Sekarang, jika kita melihat di folder gambar kita, kita akan melihat gambar sprite yang dihasilkan dengan karakter acak, seperti social-sc805f18607.png. Pada titik ini, tidak ada yang tidak terjadi di front-end, sampai kita menerapkan gaya dengan garis berikut.

 @ sertakan semua sprite sosial-; 

Hasil akhir

Akhirnya, setelah semua kerja keras kita sekarang dapat melihat hasilnya seperti ini:

Jika kita berpikir demikian 500px terlalu lebar nanti, kita hanya perlu mengubah nilainya $ lebar variabel - misalnya, 350px - sisanya akan “secara ajaib” disesuaikan. Anda juga dapat bereksperimen dengan variabel warna.

• Lihat Demo
• Sumber Unduhan

Kesimpulan

Dalam tutorial ini kami telah menunjukkan kepada Anda bagaimana membangun vCard online sederhana dengan Sass dan Compass; ini hanyalah sebuah contoh. Sass dan Kompas memang kuat, tetapi kadang-kadang itu tidak perlu. Misalnya, ketika kami mengerjakan situs web dengan beberapa halaman dan mungkin juga hanya membutuhkan lebih sedikit garis gaya, menggunakan Sass dan Kompas dianggap berlebihan..

Posting ini menutup seri Sass kami dan kami harap Anda menikmatinya. Jika Anda memiliki pertanyaan tentang subjek ini, jangan ragu untuk menambahkannya di kotak komentar di bawah ini.