Stylesheets Awesome Syntactically Menggunakan Kompas di Sass
Dalam jawatan terakhir kami, kami telah menyebut sekali tentang Compass. Menurut laman rasmi, ia digambarkan sebagai Rangka Kerja Penulisan CSS sumber terbuka.
Singkatnya, Compass adalah lanjutan Sass dan, seperti LESS Element of LESS, ia mempunyai sekumpulan Mix3 CSS3 yang sedia untuk digunakan, kecuali ia juga telah menambah beberapa perkara lain yang menjadikannya alat sahabat yang lebih kuat untuk Sass. Mari kita periksa.
Memasang Kompas
Kompas, seperti Sass, perlu dipasang dalam sistem kami. Tetapi, jika anda menggunakan aplikasi seperti App Scout atau Compass.app, ini tidak perlu.
Tanpa mereka, anda perlu melakukannya “secara manual” melalui Prompt Terminal / Perintah. Untuk berbuat demikian, ketik baris arahan berikut;
Pada Terminal Mac / Linux
permata sudo memasang kompas
Pada Prompt Perintah Windows
permata memasang kompas
Sekiranya pemasangan berjaya, anda perlu mendapat pemberitahuan seperti yang ditunjukkan di bawah;
Kemudian, jalankan baris perintah berikut dalam direktori kerja anda untuk menambah Fail projek kompas.
kompas panas
Bacaan lanjut: Dokumentasi Barisan Kompas
Konfigurasi Kompas
Jika anda telah menjalankan arahan ini kompas panas, anda kini perlu mempunyai fail bernama config.rb dalam direktori kerja anda. Fail ini digunakan untuk mengkonfigurasi output projek. Sebagai contoh, kita boleh menukar nama direktori pilihan kami.
javascripts_dir = "js"
Strip garis komentar yang dihasilkan oleh Compass; kami menetapkan benar jika kita memerlukan komen yang akan dicetak atau salah jika ia tidak perlu.
line_comments = false
Kita juga boleh menentukan output CSS. Terdapat empat pilihan yang boleh kita pilih : berkembang, : padat, : dimampatkandan :bersarang. Buat masa ini, kami hanya memerlukannya untuk diperluaskan kerana kami masih dalam peringkat pembangunan.
output_style =: diperluaskan
Saya rasa konfigurasi ini akan mencukupi untuk kebanyakan projek secara umum, tetapi anda boleh merujuk kepada dokumentasi ini, Rujukan Konfigurasi Kompas jika anda memerlukan lebih banyak pilihan.
Akhir sekali, kita perlu menonton setiap fail dalam direktori dengan baris arahan ini;
jam tangan kompas
Barisan arahan ini, seperti dalam Sass, akan melihat setiap perubahan fail, dan membuat atau mengemas kini fail CSS yang sepadan. Tetapi ingatlah, jalankan baris ini selepas anda selesai mengkonfigurasi projek ini config.rb, atau ia hanya akan mengabaikan perubahan dalam fail.
Mix3 CSS3
Sebelum berjalan melalui CSS3, dalam utama kami .scss fail, kita perlu mengimport Kompas dengan baris berikut @import "compass";, ini akan mengimport semua sambungan di Compass. Tetapi, jika kita hanya memerlukan CSS3 kita juga boleh melakukannya lebih khusus dengan baris ini @import "compass / css3".
Bacaan lanjut: Kompas CSS3.
Kini, mari kita mula membuat sesuatu dengan Saas dan Kompas. Dalam dokumen HTML, dengan mengandaikan bahawa anda juga telah mencipta satu, kami akan meletakkan markup sederhana berikut:
Idea ini juga mudah; kami akan membuat kotak berputar dengan sudut bulat, dan di bawah adalah gaya Sass kita yang bersarang untuk pemula;
badan background-color: # f3f3f3; seksyen lebar: 500px; margin: 50px auto 0; div width: 250px; ketinggian: 250px; warna latar belakang: #ccc; margin: 0 auto;
Dan, untuk mendapatkan segi empat tepat kami sudut-sudut yang bulat, kita boleh memasukkan Compass CSS3 Mixins seperti berikut;
badan background-color: # f3f3f3; seksyen lebar: 500px; margin: 50px auto 0; div width: 250px; ketinggian: 250px; warna latar belakang: #ccc; margin: 0 auto; @include border-radius;
Ini jejari sempadan Mixin akan menjana semua awalan pelayar dan, secara lalai, jejari sudut akan 5px. Tetapi, kita juga boleh menentukan radius kepada keperluan kita dengan cara ini @include border-radius (10px); .
seksyen div width: 250px; ketinggian: 250px; warna latar belakang: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; jejari sempadan: 10px;
Seterusnya, sebagai pelan kami juga akan memutar kotak. Sangat mudah untuk melakukannya dengan Kompas, yang perlu kita lakukan hanya memanggil kaedah transformasi, seperti itu;
badan background-color: # f3f3f3; seksyen lebar: 500px; margin: 50px auto 0; div width: 250px; ketinggian: 250px; warna latar belakang: #ccc; margin: 0 auto; @include border-radius (10px); @include rotate;
Mixins ini juga akan menghasilkan awalan vendor yang membosankan dan putaran akan mengambil 45 darjah secara lalai. Lihat CSS yang dihasilkan di bawah.
seksyen div width: 250px; ketinggian: 250px; warna latar belakang: #ccc; margin: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; jejari sempadan: 10px; -webkit-transform: berputar (45deg); -moz-transform: berputar (45deg); -ms-transform: putar (45deg); -o-transform: berputar (45deg); mengubah: putar (45deg);
Compass Helpers
Salah satu ciri yang paling berkuasa di Kompas adalah Pembantu. Menurut laman rasmi, Pembantu kompas adalah fungsi yang menambah fungsi yang disediakan oleh Sass. Baiklah, mari kita lihat contoh berikut untuk mendapatkan gambaran yang jelas.
Menambah fail Font-face @
Dalam contoh ini, kami akan menambah keluarga font tersuai dengan @ font-face peraturan. Dalam CSS3 biasa, kod itu mungkin kelihatan seperti ini di bawah, yang terdiri daripada empat jenis font yang berbeza dan ia juga sukar diingati untuk sesetengah orang.
@ font-face font-family: "MyFont"; format format ('truetype'), format url ('/ fon / font.otf') ('opentype'), format url ('/ fon / font.woff') ('woff'), format url ('/ fon / font.eot') ('embedded-opentype'); Dengan Kompas kita boleh melakukan perkara yang sama dengan mudah fail-font () Pembantu;
@include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); Kod di atas akan menghasilkan hasil yang sama persis dengan coretan kod pertama, ia juga akan secara automatik mengesan jenis fon dan menambahkannya ke format () sintaks.
Walau bagaimanapun, jika kita melihat kod itu dengan teliti, anda akan melihat bahawa kami tidak menambah laluan font (/ fon /). Jadi, bagaimanakah Compass tahu di mana fon berada? Nah, jangan keliru, jalan ini sebenarnya berasal dari config.rb dengan fonts_path harta;
fonts_dir = "fon"
Oleh itu, katakan kita mengubahnya fonts_dir = "myfonts", maka kod yang dijana akan url ('/ myfonts / font.ttf'). Secara lalai, apabila kita tidak menentukan laluan, Kompas akan mengarahkannya ke gaya / fon.
Menambah Imej
Mari buat contoh lain, kali ini kita akan menambah imej. Menambah imej melalui CSS adalah perkara biasa. Kami secara amnya melakukan ini dengan menggunakan imej latar belakang harta, seperti itu;
div background-image: url ('/ img / the-image.png'); Dalam Kompas, bukannya menggunakan url () fungsi, kita boleh menggantikannya dengan imej-url () Pembantu dan serupa dengan menambah @ font-face di atas, kita boleh mengabaikan laluan dan biarkan Compass mengendalikan selebihnya.
Kod ini juga akan menghasilkan pengisytiharan CSS yang sama seperti dalam coretan pertama.
div background-image: image-url (the-image.png);
Di samping itu, Compass juga mempunyai Imej Dimensi Pembantu, ia terutamanya mengesan lebar dan ketinggian imej, jadi sekiranya kita memerlukan kedua-duanya dinyatakan dalam CSS kita, kita boleh menambah dua lagi baris, seperti berikut;
div background-image: image-url ("images.png"); lebar: imej-lebar ("images.png"); ketinggian: ketinggian imej ("images.png"); Keluaran akan menjadi seperti ini;
div background-image: url ('/ img / images.png? 1344774650'); lebar: 80px; ketinggian: 80px; Bacaan lanjut: Fungsi Pembantu Kompas
Pemikiran Akhir
Baiklah, kami telah banyak membincangkan tentang Compass hari ini dan kerana anda dapat melihat ia benar-benar alat yang berkuasa dan marilah kita menulis CSS dengan cara yang lebih elegan.
Dan, seperti yang anda ketahui, Sass bukanlah satu-satunya CSS Preprocessor; terdapat juga KURANG yang kita telah dibincangkan sebelum ini. Dalam jawatan berikutnya, kami akan cuba membandingkan, kepala ke kepala, yang mana satu daripada kedua tugas ini lebih baik dalam proses preprocessing.
- Muat turun Sumber
