Bermula dengan Pemasangan Sass dan Asas-asasnya

Dalam siaran ini, kami akan membincangkan satu Progresif CSS yang dipanggil Sass atau Stylesheets Awesome Syntactically.

Jika anda telah mengikuti jawatan terdahulu pada KURANG, kami pasti anda sudah biasa dengan CSS Preprocessor. Kedua-dua Sass dan kurang adalah preprocessor CSS yang terutama memanjangkan cara kami menyusun plain-static-CSS dengan cara yang lebih dinamik menggunakan bahasa pengaturcaraan seperti Pembolehubah, Mixin, dan Fungsi.

Memasang Sass

Sebelum kita dapat mengarang Sass kita perlu memasangnya. Sass dibina atas Ruby. Jika anda bekerja pada Mac, kemungkinannya, anda sudah memasang Ruby. Jika anda boleh memasang Ruby di Windows, gunakan Ruby Installer ini.

Selepas pemasangan selesai, anda boleh pergi ke Terminal (pada Mac) atau di Command Prompt (pada Windows) kemudian ketik baris perintah berikut di dalamnya:

Pada Mac;

 permata sudo memasang sass

Pada Windows;

 permata memasang sass

Jika pemasangan berjaya, anda akan mempunyai pemberitahuan berikut di Prompt Terminal / Perintah anda.

Selanjutnya, kita perlu memilih direktori mana untuk Sass untuk menonton dengan menggunakan arahan berikut;

 sass - lawatan laluan / sass-direktori

Barisan arahan di atas akan melihat setiap .scss/.sass fail dalam jalan / direktori dan setiap kali salah satu fail dalam direktori itu ditukar, Sass akan mengemas kini fail yang sepadan atau membuat satu jika tiada.

Jika kami memerlukan Sass untuk menghasilkan fail dalam direktori tertentu, kami boleh melakukannya dengan cara ini;

 sass - nota laluan / sass-direktori: path / css-directory

Kita juga boleh menonton fail tertentu daripada direktori, dengan baris arahan ini;

 sass - perhatikan jalan / sass-direktori / styles.css

Jika arahan menonton berjaya, sesuatu seperti pemberitahuan di bawah ini akan muncul di Prompt Terminal / Perintah anda.

Bacaan lanjut: Auto-Compile Sass Files dengan Sass 3

Aplikasi Sass

Walau bagaimanapun, jika anda tidak suka bekerja melalui Terminal atau Prompt Perintah, anda boleh menggunakan beberapa aplikasi untuk Sass. Pilihan percuma ialah Pengakap; ia dibina di atas Adobe Air supaya ia dapat dijalankan pada semua OS (Windows, OSX dan Linux).

Walau bagaimanapun, ia berjalan dengan perlahan seperti yang dilaporkan sebelum ini.

Jadi jika anda tidak mempunyai kesabaran untuk itu, terdapat juga beberapa pilihan yang dibayar. Harga berbeza untuk setiap aplikasi, Compass.app berjalan dengan harga $ 10, Fire.app, $ 14 dan Codekit untuk $ 25.

Penyorotan Kod

Walaupun Sass terutamanya pelanjutan CSS, editor semasa anda mungkin tidak menyerlahkan sintaks dengan betul. Nasib baik, sudah ada beberapa pakej untuk hampir mana-mana editor kod untuk membolehkannya .sass atau .scss menonjolkan kod.

Jika anda bekerja dengan Teks Sublime seperti saya, anda boleh menggunakan pakej ini; Pakej Teks Sublime HAML & Sass dan Sublime 2 Sass, dan dengan cara yang lebih mudah, anda boleh memasang salah satu pakej ini melalui Kawalan Pakej.

Untuk editor kod lain, lihat di bawah, atau cuba Googling untuk itu.

Ini adalah tutorial skeencast yang hebat untuk mengerjakan Sass dengan Dreamweaver
Sass Mode untuk Coda. Tetapi, nampaknya mod ini telah diintegrasikan dengan Coda sebagai versi 2
Bundel SCSS Rasmi TextMate
Gula Espresso untuk Sass
InType Bundles

Bahasa Sass

Sass dan KURANG sebenarnya berkongsi beberapa bahasa umum, di bawah adalah beberapa daripada mereka.

Pembolehubah

 $ warna asas: # 000; $ lebar: 100px;

Satu-satunya perbezaan daripada pemboleh ubah kurang adalah bahawa pembolehubah dalam Sass ditakrifkan dengan a $ tanda.

Peraturan Nesting

 header width: 980px; ketinggian: 80px; nav ul style-list: none; padding: none; margin: none;  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; jejari jejari: $ radius;

Operasi

 li width: $ width / 5 - 10px;

Kenyataan Bersyarat

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

Dalam KURANG anda mungkin melakukan perkara yang sama melalui ekspresi Pengawal, yang telah kita bahas dalam tutorial ini.

Pemikiran Akhir

Dan itu sahaja. Dalam jawatan berikutnya, kami akan mula meneroka bahasa Sass dan sahabatnya, Kompas. Tinggal.