Memulai dengan Instalasi Sass dan Dasar-Dasar

Dalam posting ini, kita akan membahas Preprocessor CSS yang disebut Sass atau Lembar Gaya Keren yang Sintaksis.

Jika Anda telah mengikuti posting kami sebelumnya pada KURANG, kami yakin bahwa Anda terbiasa dengan Preprosesor CSS. Sass dan KURANG adalah Preprosesor CSS yang terutama memperluas cara kami menyusun plain-static-CSS dengan cara yang lebih dinamis menggunakan bahasa pemrograman seperti Variabel, Mixins, dan Fungsi.

Menginstal Sass

Sebelum kita dapat membuat Sass, kita perlu menginstalnya. Sass dibangun di atas Ruby. Jika Anda menggunakan Mac, kemungkinan besar, Anda sudah menginstal Ruby. Jika Anda dapat menginstal Ruby di Windows, gunakan Ruby Installer ini.

Setelah instalasi selesai, Anda dapat pergi ke Terminal (pada Mac) atau di Command Prompt (pada Windows) kemudian ketik baris perintah berikut di dalamnya:

Di Mac;

 sudo gem install sass

Di Windows;

 permata install sass

Jika instalasi berhasil, Anda akan memiliki notifikasi berikut di Terminal / Command Prompt Anda.

Selanjutnya, kita perlu memilih direktori mana yang akan ditonton Sass menggunakan perintah berikut;

 sass --watch path / sass-directory

Baris perintah di atas akan mengawasi setiap .scss/.kelancangan file dalam jalur / direktori dan setiap kali salah satu file di direktori itu diubah, Sass akan memperbarui file yang sesuai atau membuatnya jika tidak ada.

Jika kita membutuhkan Sass untuk menghasilkan file dalam direktori tertentu, kita dapat melakukannya dengan cara ini;

 sass --watch path / sass-directory: path / css-directory

Kami juga dapat menonton file tertentu daripada direktori, dengan baris perintah ini;

 sass - lihat path / sass-directory / styles.css

Jika perintah arloji berhasil, sesuatu seperti pemberitahuan di bawah ini akan muncul di Terminal / Command Prompt Anda.

Bacaan lebih lanjut: Kompilasi Otomatis File Sass dengan Sass 3

Aplikasi Sass

Namun, jika Anda benci bekerja melalui Terminal atau Command Prompt, Anda dapat menggunakan beberapa aplikasi untuk Sass. Opsi gratis adalah Scout; itu dibangun di atas Adobe Air sehingga dapat dijalankan di semua OS (Windows, OSX dan Linux).

Namun, ini berjalan sangat lambat karena beberapa telah dilaporkan sebelumnya.

Jadi, jika Anda tidak memiliki kesabaran untuk itu, ada juga beberapa opsi berbayar. Harganya bervariasi untuk setiap aplikasi, Compass.app berlaku untuk $ 10, Fire.app, $ 14 dan Codekit untuk $ 25.

Sorotan Kode

Meskipun Sass pada dasarnya adalah ekstensi CSS, editor Anda saat ini mungkin tidak menyoroti sintaks dengan benar. Untungnya, sudah ada beberapa paket untuk mengaktifkan hampir semua editor kode .kelancangan atau .scss penyorotan kode.

Jika Anda bekerja dengan Sublime Text 2 seperti saya, Anda dapat menggunakan paket ini; Sublime Text Paket HAML & Sass dan Sublime Text 2 Sass, dan untuk cara yang lebih mudah, Anda dapat menginstal salah satu paket ini melalui Kontrol Paket.

Untuk editor kode lain, lihat di bawah ini, atau coba Googling untuk itu.

Yang ini adalah tutorial screencast yang bagus untuk mengerjakan Sass dengan Dreamweaver
Mode Sass untuk Coda. Tapi, sepertinya mode ini sudah terintegrasi dengan Coda pada versi 2
Bundel SCSS Resmi TextMate
Gula Espresso untuk Sass
Kumpulan InType

Bahasa Sass

Sass dan KURANG sebenarnya berbagi beberapa bahasa umum, di bawah ini adalah beberapa di antaranya.

Variabel

 $ color-base: # 000; $ lebar: 100px;

Satu-satunya perbedaan dari variabel KURANG adalah bahwa variabel dalam Sass didefinisikan dengan a $ tanda.

Aturan Bersarang

 header width: 980px; tinggi: 80px; nav ul list-style: none; padding: tidak ada; margin: tidak ada;  li display: inline; a text-decoration: none;

Mixin dan Fungsi

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; border-radius: $ radius;

Operasi

 li width: $ width / 5 - 10px;

Pernyataan Bersyarat

 @jika ringan ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

Dalam KURANG Anda dapat melakukan hal serupa melalui ekspresi Guard, yang telah kita bahas dalam tutorial ini.

Pemikiran Akhir

Dan itu saja. Di pos berikutnya, kita akan mulai menjelajahi bahasa Sass dan temannya, Compass. Tetap disini.