Kandungan
- Apa itu preprocessor CSS?
- Apa itu Sass?
- Cara menggunakan Sass
- Sintaks
- Pemboleh ubah
- Bersarang
- Separa
- Import
- Campuran
- Memanjangkan / Warisan
- Pengendali
Apa itu Sass? Itulah soalan yang harus kita jawab di sini. Sekiranya anda baru menggunakan reka bentuk web, anda mungkin pernah mendengar istilah melayang, tetapi anda mungkin tidak cukup pantas dengan apa sebenarnya Sass, apa yang dilakukan, dan sama ada anda harus menggunakannya atau tidak. Singkatnya, Sass adalah preprocessor CSS, yang menambahkan ciri khas seperti pemboleh ubah, peraturan bersarang dan mixin (kadang-kadang disebut sebagai gula sintaksis) ke dalam CSS biasa. Tujuannya adalah untuk menjadikan proses pengekodan lebih mudah dan berkesan. Mari kita terokai dengan lebih terperinci.
Untuk lebih banyak alat, terokai panduan kami ke kerangka CSS terbaik dan bahagian atas alat reka bentuk web untuk mencuba.
- Penyunting kod terbaik
Apa itu preprocessor CSS?
Praprosesor CSS adalah bahasa skrip yang memperluas CSS dengan membolehkan pembangun menulis kod dalam satu bahasa dan kemudian menyusunnya ke dalam CSS. Sass mungkin merupakan pemproses yang paling popular sekarang, tetapi contoh lain yang terkenal termasuk Less dan Stylus.
Sebelum kita melangkah lebih jauh, pengumuman perkhidmatan awam yang cepat adalah teratur: kebanyakan pereka web akan mengatakan bahawa jika anda baru menggunakan CSS, lebih baik anda menghindari Sass (atau praprosesor, pelanjutan atau kerangka kerja) semasa anda masih belajar. Walaupun benar mereka menawarkan banyak kelebihan dalam kelajuan dan kecekapan, penting bagi anda untuk benar-benar memahami asas-asas CSS. Pastikan anda mempelajari konsep teras sebelum anda mula meneroka jalan pintas dan membingungkan.
Apa itu Sass?
Sass (singkatan dari 'Lembaran gaya hebat secara sintaksis) adalah lanjutan dari CSS yang membolehkan anda menggunakan perkara seperti pemboleh ubah, peraturan bersarang, import sebaris dan banyak lagi. Ia juga membantu memastikan segala sesuatu teratur dan membolehkan anda membuat helaian gaya dengan lebih pantas.
Sass serasi dengan semua versi CSS. Satu-satunya syarat untuk menggunakannya ialah anda mesti memasang Ruby. Pengguna juga diminta untuk mengikuti Garis Panduan Komuniti Sass.
Cara menggunakan Sass
Pada bahagian berikut, kami akan menggariskan beberapa petua asas untuk menggunakan Sass, dengan menggunakan contoh dari laman web Sass rasmi. Lihat Dokumentasi Sass untuk rujukan dan contoh tambahan.
Sintaks
Sass merangkumi dua pilihan sintaks:
- SCSS (Sassy CSS): Menggunakan .scss sambungan fail dan mematuhi sepenuhnya sintaks CSS
- Menggantung (hanya dipanggil 'Sass'): Kegunaan .sass peluasan fail dan lekukan daripada kurungan; ia tidak sepenuhnya mematuhi sintaks CSS, tetapi lebih cepat menulis
Perhatikan bahawa fail boleh ditukar dari satu sintaks ke yang lain menggunakan sass-menukar arahan.
Pemboleh ubah
Sama seperti bahasa pengaturcaraan lain, Sass membenarkan penggunaan pemboleh ubah yang dapat menyimpan maklumat yang boleh anda gunakan di seluruh helaian gaya anda. Sebagai contoh, anda boleh menyimpan nilai warna dalam pemboleh ubah di bahagian atas fail, dan kemudian menggunakan pemboleh ubah ini semasa menetapkan warna elemen anda. Ini membolehkan anda menukar warna dengan cepat tanpa perlu mengubah setiap baris secara berasingan.
Sebagai contoh:
$ font-stack: Helvetica, sans-serif; $ primer-warna: # 333; badan {font: 100% $ font-stack; warna: $ primer-warna; }
CSS berikut akan dihasilkan:
body {font: 100% Helvetica, sans-serif; warna: # 333; }
Bersarang
Bersarang adalah pedang bermata dua. Walaupun menyediakan kaedah yang sangat baik untuk mengurangkan jumlah kod yang perlu anda tulis, ia juga boleh menyebabkan CSS yang lebih berkualiti jika tidak dilaksanakan dengan teliti. Ideanya adalah untuk meletakkan pemilih CSS anda sedemikian rupa sehingga meniru hierarki HTML anda.
Berikut menunjukkan gaya navigasi asas yang menggunakan sarang:
nav {ul {margin: 0; pembalut: 0; gaya senarai: tiada; } li {paparan: sebaris-blok; } a {paparan: blok; padding: 6px 12px; hiasan teks: tiada; }}
Output CSS adalah seperti berikut:
nav ul {margin: 0; pembalut: 0; gaya senarai: tiada; } nav li {paparan: sebaris-blok; } nav a {display: blok; padding: 6px 12px; hiasan teks: tiada; }
Separa
Partial adalah fail Sass yang lebih kecil yang dapat diimport (lihat bahagian seterusnya) ke dalam fail Sass yang lain. Fikirkan sebahagian sebagai coretan kod. Dengan coretan kod ini, CSS anda kini boleh menjadi modular dan lebih mudah dijaga. Sebahagian ditetapkan seperti itu dengan menamakannya dengan garis bawah terkemuka: _partial.scss.
Import
Digunakan dengan Partial (lihat bahagian sebelumnya), @import arahan membolehkan anda mengimport fail separa anda ke dalam fail semasa, untuk membina satu fail CSS. Perhatikan berapa banyak import yang anda gunakan sebagai permintaan HTTP yang akan dihasilkan untuk setiap satu.
// _reset.scss html, body, ul, ol {margin: 0; pembalut: 0; }
// basefile.scss @import 'tetapkan semula'; body {font: 100% Helvetica, sans-serif; warna latar: #efefef; }
Dan output CSS yang sepadan:
html, body, ul, ol {margin: 0; pembalut: 0; } badan {font: 100% Helvetica, sans-serif; warna latar: #efefef; }
Catatan: Semasa mengimport sebahagian, anda tidak perlu memasukkan pelanjutan fail atau garis bawah.
Campuran
Salah satu kelebihan menggunakan preprocessor adalah kemampuan mereka untuk mengambil kod yang panjang dan rumit dan mempermudahnya. Di sinilah mixins berguna!
Contohnya, jika anda perlu memasukkan awalan vendor, anda boleh menggunakan mixin sebagai gantinya. Lihat contoh ini untuk jejari sempadan:
@mixin border-radius ($ radius) {-webkit-border-radius: $ radius; -moz-border-radius: $ radius; -ms-border-radius: $ radius; sempadan-jejari: radius $; } .box {@masuk sempadan-radius (10px); }
Perhatikan @mixin arahan di bahagian atas. Ia telah diberi nama jejari sempadan dan menggunakan pemboleh ubah $ jejari sebagai parameternya. Pemboleh ubah ini digunakan untuk menetapkan nilai radius untuk setiap elemen.
Kemudian, @sertakan arahan dipanggil, bersama dengan nama mixin (jejari sempadan) dan parameter (10px). Oleh itu .box {@masuk sempadan-radius (10px); }.
CSS berikut dihasilkan:
.box {-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; sempadan-jejari: 10px; }
Memanjangkan / Warisan
The @kesudahan arahan telah disebut sebagai salah satu ciri paling kuat Sass. Setelah melihatnya beraksi, jelas mengapa.
Ideanya adalah bahawa dengan arahan ini, anda tidak perlu memasukkan banyak nama kelas pada elemen HTML anda dan dapat menyimpan kod anda KERING (jangan ulangi sendiri). Pemilih anda boleh mewarisi gaya pemilih lain, dan kemudian dapat diperluas dengan mudah apabila diperlukan. Sekarang itu hebat.
Pengendali
Mempunyai kemampuan untuk melakukan pengiraan di CSS anda memungkinkan anda melakukan lebih banyak perkara, seperti menukar nilai piksel menjadi peratusan. Anda akan mendapat akses ke fungsi matematik standard seperti penambahan, pengurangan, pendaraban dan pembahagian. Sudah tentu, fungsi ini dapat digabungkan untuk membuat pengiraan yang kompleks.
Di samping itu, Sass merangkumi beberapa fungsi terbina dalam untuk membantu memanipulasi nombor. Berfungsi seperti peratusan (), lantai () dan bulat () untuk menamakan beberapa.
