Lembar Gaya Keren yang Secara Sintaksis Menggunakan Kompas di Sass
Dalam posting terakhir kami, kami telah menyebutkan sekali tentang Kompas. Menurut situs resmi, itu digambarkan sebagai Kerangka Penulisan CSS sumber terbuka.
Singkatnya, Kompas adalah ekstensi Sass dan, seperti KURANG Elemen KURANG, ia memiliki banyak Campuran CSS3 yang siap digunakan, kecuali ia juga menambahkan beberapa hal lain yang menjadikannya alat pendamping yang lebih kuat untuk Sass. Mari kita periksa.
Memasang Kompas
Kompas, seperti Sass, perlu diinstal di sistem kami. Tetapi, jika Anda menggunakan aplikasi seperti Scout App atau Compass.app, ini tidak diperlukan.
Tanpa mereka, Anda harus melakukannya “secara manual” melalui Terminal / Command Prompt. Untuk melakukannya, ketikkan baris perintah berikut;
Di Terminal Mac / Linux
sudo permata instal kompas
Di Prompt Perintah Windows
permata instal kompas
Jika instalasi berhasil, Anda harus mendapatkan pemberitahuan seperti yang ditunjukkan di bawah ini;
Kemudian, jalankan baris perintah berikut di direktori kerja Anda untuk menambahkan Kompas file proyek.
kompas init
Bacaan lebih lanjut: Dokumentasi Baris Perintah Kompas
Konfigurasi Kompas
Jika Anda telah menjalankan perintah ini kompas init, Anda sekarang harus memiliki file bernama config.rb di direktori kerja Anda. File ini digunakan untuk mengkonfigurasi output proyek. Misalnya, kita dapat mengubah nama direktori pilihan kita.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Keluarkan baris komentar yang dihasilkan oleh Kompas; kita atur benar apakah kita perlu komentar untuk dicetak atau Salah jika tidak harus.
line_comments = false
Kami juga dapat memutuskan output CSS. Ada empat opsi yang bisa kita pilih : diperluas, : kompak, : dikompresidan : bersarang. Untuk saat ini, kami hanya perlu diperluas karena kami masih dalam tahap pengembangan.
output_style =: diperluas
Saya pikir konfigurasi ini akan cukup untuk sebagian besar proyek secara umum, tetapi Anda selalu dapat merujuk ke dokumentasi ini, Referensi Konfigurasi Kompas jika Anda memerlukan lebih banyak preferensi.
Terakhir, kita perlu menonton setiap file dalam direktori dengan baris perintah ini;
kompas menonton
Baris perintah ini, seperti pada Sass, akan mengawasi setiap perubahan file, dan membuat atau memperbarui file CSS yang sesuai. Tapi ingat, jalankan baris ini setelah Anda selesai mengkonfigurasi proyek config.rb, atau itu hanya akan mengabaikan perubahan dalam file.
Campuran CSS3
Sebelum berjalan melalui CSS3, di utama kami .scss file, kita perlu mengimpor Kompas dengan baris berikut @import "kompas";, ini akan mengimpor semua ekstensi di Kompas. Tetapi, jika kita hanya membutuhkan CSS3, kita juga dapat melakukannya dengan lebih spesifik dengan baris ini @import "kompas / css3".
Bacaan lebih lanjut: Kompas CSS3.
Sekarang, mari kita mulai membuat sesuatu dengan Saas dan Kompas. Dalam dokumen HTML, dengan asumsi bahwa Anda juga telah membuatnya, kami akan menempatkan markup sederhana berikut:
Idenya juga sederhana; kami akan membuat kotak diputar dengan sudut bulat, dan di bawah ini adalah gaya bersarang Sass kami untuk pemula;
body background-color: # f3f3f3; bagian width: 500px; margin: 50px otomatis 0; div width: 250px; tinggi: 250px; warna latar: #ccc; margin: 0 otomatis;
Dan, untuk mendapatkan sudut persegi panjang kami, kami dapat menyertakan Kompas CSS3 Mixins sebagai berikut;
body background-color: # f3f3f3; bagian width: 500px; margin: 50px otomatis 0; div width: 250px; tinggi: 250px; warna latar: #ccc; margin: 0 otomatis; @sertakan radius batas;
Ini batas-jari-jari Mixins akan menghasilkan semua awalan peramban dan, secara default, radius sudut akan 5px. Tapi, kita juga bisa menentukan radius sesuai kebutuhan kita dengan cara ini @include border-radius (10px); .
bagian div width: 250px; tinggi: 250px; warna latar: #ccc; margin: 0 otomatis; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
Selanjutnya, sesuai rencana kita juga akan memutar kotak. Sangat mudah untuk melakukannya dengan Kompas, yang perlu kita lakukan hanyalah memanggil metode transformasi, seperti itu;
body background-color: # f3f3f3; bagian width: 500px; margin: 50px otomatis 0; div width: 250px; tinggi: 250px; warna latar: #ccc; margin: 0 otomatis; @include border-radius (10px); @sertakan putar;
Mixins ini juga akan menghasilkan awalan vendor yang membosankan dan rotasi akan memakan waktu 45 derajat secara default. Lihat CSS yang dihasilkan di bawah ini.
bagian div width: 250px; tinggi: 250px; warna latar: #ccc; margin: 0 otomatis; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg);
Pembantu Kompas
Salah satu fitur terkuat di Kompas adalah Helpers. Menurut situs resmi, Pembantu kompas adalah fungsi yang menambah fungsi yang disediakan oleh Sass. Baiklah, mari kita lihat contoh-contoh berikut untuk mendapatkan gambaran yang jelas.
Menambahkan @ font-face file
Dalam contoh ini, kita akan menambahkan keluarga font khusus @ font-face aturan. Dalam CSS3 biasa, kode tersebut mungkin terlihat seperti ini di bawah ini, terdiri dari empat jenis font yang berbeda dan juga sulit diingat bagi sebagian orang..
@ font-face font-family: "MyFont"; src: format url ('/ fonts / font.ttf') ('truetype'), format url ('/ fonts / font.otf') ('opentype'), format url ('/ fonts / font.woff') ('woff'), format url ('/ fonts / font.eot') ('embedded-opentype'); Dengan Kompas kita dapat melakukan hal yang sama dengan lebih mudah font-file () Pembantu;
@ sertakan font-face ("MyFont", font-file ("font.ttf", "font.otf", "font.woff", "font.eot")); Kode di atas akan menghasilkan hasil yang persis sama dengan cuplikan kode pertama, juga akan secara otomatis mendeteksi jenis font dan menambahkannya ke format() sintaksis.
Namun, jika kita melihat kode dari dekat, Anda akan melihat bahwa kami tidak menambahkan jalur font (/ fonts /). Jadi, bagaimana Compass tahu di mana font berada? Nah, jangan bingung, jalan ini sebenarnya berasal dari config.rb dengan fonts_path milik;
fonts_dir = "fonts"
Jadi, katakanlah kita mengubahnya menjadi fonts_dir = "myfonts", maka kode yang dihasilkan akan url ('/ myfonts / font.ttf'). Secara default, saat kami tidak menentukan path, Compass akan mengarahkannya ke stylesheet / font.
Menambahkan Gambar
Mari kita buat contoh lain, kali ini kita akan menambahkan gambar. Menambahkan gambar melalui CSS adalah hal yang umum. Kami biasanya melakukan ini dengan menggunakan gambar latar belakang properti, seperti itu;
div background-image: url ('/ img / the-image.png'); Di Kompas, daripada menggunakan url () fungsi, kita bisa menggantinya dengan gambar-url () Pembantu dan mirip dengan menambahkan @ font-face di atas, kita dapat sepenuhnya mengabaikan jalan dan membiarkan Kompas menangani sisanya.
Kode ini juga akan menghasilkan deklarasi CSS yang sama persis seperti pada cuplikan pertama.
div background-image: image-url (the-image.png);
Selain itu, Kompas juga memiliki Pembantu Dimensi Gambar, ini terutama mendeteksi lebar dan tinggi gambar, jadi jika kami membutuhkan keduanya untuk ditentukan dalam CSS, kami dapat menambahkan dua baris lagi, sebagai berikut;
div background-image: image-url ("images.png"); width: image-width ("images.png"); tinggi: tinggi gambar ("images.png"); Outputnya akan menjadi seperti ini;
div background-image: url ('/ img / images.png? 1344774650'); lebar: 80px; tinggi: 80px; Bacaan lebih lanjut: Fungsi Pembantu Kompas
Pemikiran Akhir
Baiklah, kami telah membahas cukup banyak tentang Kompas hari ini dan seperti yang Anda lihat itu benar-benar alat yang ampuh dan mari kita menulis CSS dengan cara yang lebih elegan.
Dan, seperti yang sudah Anda ketahui, Sass bukan satu-satunya Preprosesor CSS; ada juga KURANG yang telah kita bahas sebelumnya. Pada posting berikutnya, kami akan mencoba membandingkan, head-to-head, yang mana salah satu dari keduanya melakukan pekerjaan dengan lebih baik dalam preprocessing CSS.
- Sumber Unduhan
