Daripada pengarang: Pertama sekali, apakah itu prapemproses? Ringkasnya, prapemproses ialah atur cara yang mengubah suai data agar sesuai dengan keperluan input program lain. Prapemproses CSS ialah bahasa skrip yang memperluaskan keupayaan CSS biasa dengan pembolehubah, peraturan bersarang, fungsi dan blok logik.

Mengapa saya perlu menggunakannya?

Selalunya anda akan mendapati diri anda berada dalam situasi di mana anda perlu menggunakan nilai yang sama untuk harta tertentu dalam tempat berbeza. Sebagai contoh, anda mula-mula menentukan merah sebagai warna utama tapak. Kemudian anda perlu menukarnya kepada hijau.

Dengan pembolehubah, anda tidak perlu mencari dan menggantikan setiap sebutan gaya merah. Anda mentakrifkan nilai pembolehubah sekali, contohnya "warna utama", dan kemudian menggunakan pembolehubah itu sebagai nilai.

Nilai warna primer berubah di satu tempat. Anda juga boleh mengimport fail CSS s daripada sumber lain tanpa memikirkan bilangan permintaan rangkaian, kerana mereka semua boleh digabungkan menjadi satu fail sebelum penyusunan.

Terima kasih kepada sifat bersarang prapemproses CSS, anda akan mendapat kod padat dengan hasil yang sama. LESS dan SCSS adalah berdasarkan prinsip DRY, yang bermaksud "Jangan ulangi diri sendiri" atau "jangan ulangi diri sendiri."

Prapemproses. Permulaan yang cepat

Apa yang salah dengan KURANG?

Rangkaian sudah penuh dengan perbincangan tentang mana yang lebih baik: KURANG atau SCSS. Oleh itu, saya tidak akan mengupas kedua-dua topik secara terperinci. Sebaliknya, saya akan bercakap tentang masalah kecil yang saya hadapi dengan KURANG.

SCSS menggunakan simbol $ untuk mentakrifkan pembolehubah, manakala LESS menggunakan simbol @. Memandangkan CSS juga menggunakan simbol @ untuk pertanyaan media, import dan animasi bingkai utama, ini boleh mengelirukan bagi pembangun.

Simbol $ tidak digunakan dalam CSS. Simbol @ terdapat dalam SCSS, tetapi ia digunakan untuk arahan @if , @else , @each , @for dan @while.

Walaupun senario ini tidak realistik untuk semua orang, lebih baik menggunakan ID yang berbeza untuk memisahkan elemen.

SCSS menyokong tradisional ungkapan logik seperti if/else, blok dan gelung. Campuran terkawal dalam KURANG lebih mudah dilihat, tetapi lebih sukar untuk difahami.

Boleh dilakukan menggunakan KURANG...

... atau hanya menggunakan SCSS.

LESS mentakrifkan hanya satu campuran terkawal. Oleh itu, anda tidak boleh hanya lulus hujah kedua dan memprosesnya dalam mixin yang sama, menduplikasi kod untuk semua kemungkinan senario. Malah, KURANG (kurang) adalah lebih (pun intended).

Saya tahu adalah mungkin untuk memendekkan kod dengan menggunakan nilai tambahan sebagai nama harta untuk kes ini, tetapi masalahnya ialah saya tidak boleh memetakan dua bahagian berbeza dari campuran yang sama kepada KURANG.

Terdapat lebih banyak sakit kepala dengan kod ini...

Prapemproses. Permulaan yang cepat

Belajar asas bekerja dengan Kurang prapemproses dan Sass dengan sifar lengkap dalam masa kurang 2 minggu

... daripada dengan ini.

Untuk mencapai hasil yang sama dengan KURANG, saya perlu mentakrifkan segala-galanya, menulis mixin, dapatkan kedudukan indeks, ulangi dengan logik saya sehingga nilai indeks adalah sama dengan sifar, dan panggil mixin secara manual.

Walaupun ini adalah pendapat peribadi saya, saya rasa SCSS umumnya mengendalikan nilai pengiraan dan nilai matematik dengan lebih baik.

Apa yang tidak kena?

KURANG, sebaliknya, jauh lebih kompleks. Sebagai contoh, apabila saya menggunakannya, saya tidak cuba membuat pengiraan. Tetapi walaupun saya melakukannya, sejak bila 100% tolak 50px sama dengan 50%?

KURANG, mengapa anda mengabaikan nilai dengan unit perubahan?

Mengapa anda membuat saya belajar tongkat anda sedangkan saya sudah tahu CSS?

Dan satu perkara terakhir. Terima kasih kepada projek LibSass, SCSS mempunyai banyak pembungkus untuk bahasa lain, seperti C, Go, PHP, Python, Dart, dll.

Mengapa kami memutuskan untuk meninggalkan LESS demi SCSS?

Semasa kami membangunkan Kad JotForm, kami perlu pra-memproses nilai pembolehubah - pra-penyusun dan cache bahagian pelayan pada masa yang sama; dan semua ini perlu dilakukan dengan sempurna.

Kami mahu pengguna dapat menyesuaikan penampilan borang Supaya sebarang perubahan dipaparkan serta-merta dan serentak dan dicache pada pelayan. Demi pengguna kami, kami tidak mahu menjalankan shell pelanggan KURANG kerana itu memerlukan kuasa pengkomputeran pelanggan - dan banyak perkara boleh menjadi salah.

Kami tidak memulakan kitaran pembangunan dengan matlamat untuk beralih daripada KURANG kepada SCSS. Tetapi separuh jalan untuk menangani isu-isu kecil ini, kekurangan pembungkus yang baik untuk KURANG adalah masalah terakhir.

Walau bagaimanapun, perbezaan antara KURANG dan SCSS adalah kurang penting daripada persamaan mereka. Pada akhirnya, tidak kira prapemproses yang anda gunakan, asalkan anda menggunakannya.

Cuba menguruskan projek besar dengan satu fail CSS dan tradisional struktur CSS jauh lebih sukar daripada menggunakan prapemproses dengan beberapa masalah.

Apakah tugas utama prapemproses, dan yang mana satu untuk dipilih: SASS atau KURANG, kami akan membincangkan dalam artikel ini. Mula-mula anda perlu menentukan prapemproses - apakah itu? Ia adalah alat atau alat yang mengubah suai kod tertentu dengan mengubahnya melalui pelbagai keupayaan. Input pemproses ialah kod yang diterangkan oleh pelbagai struktur sintaksis. Reka bentuk ini hanya boleh difahami oleh instrumen ini. Ia boleh menggantikan pelbagai binaan bahasa yang kompleks atau, sebaliknya, menambah yang baharu. Output daripada program adalah kod lebih daripada Kualiti rendah dengan struktur yang dibuang.

Untuk lebih memahami istilah prapemproses, mari lihat contoh. Input program ini ialah kod yang mengandungi pelbagai perkataan, masalah, koma dan noktah. Sekiranya terdapat fungsi penggantian kata kunci dalam bentuk pendek, iaitu, dalam singkatan, kepada nama penuh, maka output akan menjadi ayat dengan notasi yang diperluas. Ini adalah pemahaman yang paling primitif tentang apa itu prapemproses. Pada asasnya, ia mengandungi arahan dan keupayaan yang lebih kompleks.

Jadi, program ini menawarkan pelbagai reka bentuk untuk kesederhanaan dan kelajuan pembangunan dan sokongan gaya.

Biasanya kod itu bertujuan untuk ciri-ciri manusia:

Kebolehbacaan.

Struktur.

Prestasi.

Juga, apabila mempertimbangkan prapemproses, pengaturcara berhadapan dengan konsep gula sintaksis. Ini adalah beberapa tambahan kepada bahasa pengaturcaraan yang tidak menjejaskan sebarang keuntungan. ciri-ciri tambahan, tetapi meningkatkan kebolehbacaan.

Jenis utama

Pilihan yang paling biasa ialah LESS, SASS dan Stylus. Jadi, seperti yang telah ditakrifkan di atas, kelebihan menggunakan alat tersebut ialah penambahbaikan kandungan teks, struktur dan produktiviti. Walau bagaimanapun, beberapa pembangun menggunakan program sedemikian dalam kerja mereka, kerana mereka percaya bahawa bekerja dengan mereka adalah rumit dan banyak fungsi tidak jelas.

Program ini adalah yang paling popular dalam masalah ini. Program ini telah dibangunkan pada tahun 2009 oleh sekumpulan pengaturcara. Ia mempunyai semua fungsi peringkat asas. Kelemahan utama adalah kekurangan pembinaan bersyarat dan kitaran. Kelebihan utama instrumen ini– ia jelas dan mudah digunakan, ia kefungsian boleh dilanjutkan dengan pelbagai pemalam.

Helaian Gaya Hebat Secara Sintaksis

SASS ialah prapemproses yang paling berkuasa. Ia dibangunkan oleh seluruh pasukan pengaturcara. Ia diasaskan pada tahun 2007 sebagai modul untuk HAML dan juga ditulis dalam Ruby (terdapat port C++). Ia juga mempunyai rangkaian ciri yang lebih luas berbanding dengan program lain. Untuk memanjangkan keupayaan Helaian Gaya Syntactically Awesome, anda boleh menggunakan pustaka Kompas yang berkuasa. Program SASS mempunyai dua pilihan sintaks: Sass dan SCSS.

Ini adalah instrumen termuda dan paling menjanjikan. Ia ditubuhkan pada tahun 2010. Prapemproses Stylus ialah prapemproses yang paling mudah dan boleh diperluaskan.

Biasanya pengaturcara sudah bekerja dengan KURANG. Mana-mana fail dianggap sebagai fail KURANG yang sah. Dalam kes ini, tidak ada keperluan untuk sambungan fail. Apabila mengambil kod CSS biasa, mari letakkannya dalam fail dengan nama yang sama, tetapi dengan sambungan .less. Malah, fail yang sama diterima tanpa ralat dan dengan kandungan yang tepat. Satu-satunya perbezaan antara fail adalah ketersediaan baris kosong selepas pemilih. Oleh itu, apabila menggunakan alat ini, masa penyusunan adalah lebih kurang. Oleh itu tindakan produk ini bertujuan untuk matlamat tertentu, membina struktur yang mudah. Ini boleh dilakukan dengan CSS biasa, tetapi ia akan menjadi kurang mudah.

Faktor utama dalam memilih

mengikut ciri fungsi Sass pasti lebih baik daripada program lain dalam banyak cara. Tetapi jika kerja sudah dilakukan menggunakan Kurang, tidak ada gunanya mengubahnya. Seperti yang dinyatakan di atas, SASS membenarkan anda menggunakan Kompas, yang menjadikan kerja dengan awalan lebih mudah. Program lain tidak mempunyai projek Kompas kerana bahasa alat itu agak kompleks. SASS mempunyai Boolean dan pengendali kitaran. Laman web LESS cantik dan mesra pengguna berbanding laman web lain.

Apabila bekerja dengan peraturan @media, pengaturcara menambah blok dengannya di bahagian bawah halaman gaya. Ini membawa kepada terputus hubungan dalam gaya. Less dan Sass ialah kedua-dua alat yang menyelesaikan masalah ini, dan matematik di belakangnya secara amnya serupa. Dari segi kelajuan, kedua-dua prapemproses mempunyai prestasi yang baik.

Pembangun kedua-dua pilihan terus memperbaikinya lagi.

Menurut ulasan dan komen daripada pengaturcara, kedua-dua alat boleh digunakan dengan keupayaan yang sama. Helaian Gaya Hebat Secara Syntactically menurut beberapa sumber mempunyai lebih banyak lagi kelajuan rendah berbanding yang lain. Sesetengah menganggap Stylus telah mengatasi kedua-dua prapemproses hari ini.

Jadi, tidak ada penyelesaian tepat untuk persoalan menggunakan Less dan Sass, kerana kedua-duanya mempunyai sifat dan fungsi yang baik. Oleh itu, pilihan ditentukan oleh matlamat dan objektif pengaturcara.

"dan soalan yang benar-benar logik timbul: "Apakah perbezaan antara SASS dan SCSS?" Topiknya menarik, jadi mari kita fikirkannya.

Bila kita bercakap tentang Apabila bercakap tentang Sass, kami secara amnya bermaksud prapemproses dan bahasa secara umum.

Walau bagaimanapun, menggunakan Sass (prapemproses) kita boleh menggunakan dua sintaks yang berbeza:

• Sass (lekukan) ;
• SCSS (sintaks seperti CSS).

Sedikit sejarah

Sass pada asalnya merupakan sebahagian daripada prapemproses lain, Haml, yang dicipta dan ditulis oleh pembangun Ruby.

Jadi gaya Sass menggunakan sintaks seperti Ruby, tiada kurungan, tiada titik bertitik dan tiada lekukan yang ketat, seperti ini:

// Variable!primary -color= hotpink // Primary =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !utama -lebar warna= 100% limpahan= tersembunyi .my-other-element +border-radius(5 px)

Berbanding dengan Sintaks CSS terdapat perbezaan yang ketara.

Pembolehubah ditentukan melalui ! , bukan $ , simbol tugasan nilai = , bukan :.

Tetapi inilah rupa Sass sebelum versi 3.0, dikeluarkan pada Mei 2010, yang diperkenalkan sepenuhnya sintaks baharu dipanggil SCSS atau Sassy CSS.

Matlamatnya adalah untuk membawa sintaks Sass lebih dekat dengan CSS, menjadikannya lebih serasi dengan CSS:

// Pembolehubah $primary -warna: hotpink; // Mixin @mixin border-radius($radius ) ( -webkit-border-radius: $radius ; -moz-border-radius: $radius ; border-radius: $radius ; ) .my-element ( color: $primary -warna; lebar: 100%; limpahan: tersembunyi;

SCSS pastinya lebih dekat dengan CSS berbanding Sass. Pembangun Sass bekerja keras untuk menjadikan kedua-dua sintaks lebih dekat antara satu sama lain dengan menggantikan ! (tanda pembolehubah) dan = (tanda tugasan) pada $ dan: daripada CSS.

Jadi apabila memulakan projek baharu, anda mungkin tertanya-tanya apakah sintaks yang hendak digunakan. Biar saya bantu awak buat keputusan.

Kelebihan Sintaks Inden Sass

Walaupun sintaks ini mungkin kelihatan agak pelik kepada anda, ia mempunyai beberapa detik-detik menarik. Pertama sekali, ia lebih pendek dan lebih mudah untuk menaip. Tiada kurungan atau koma bertitik, ia tidak diperlukan.

Ia tidak memerlukan @mixin atau @include apabila sudah cukup simbol mudah: = dan + .

Sass juga mempunyai piawaian pengekodan yang bersih kerana penggunaan lekukannya. Memandangkan lekukan yang salah boleh memecahkan keseluruhan helaian gaya .sass, langkah pertama di sini ialah memastikan kod itu bersih dan diformatkan dengan betul.

Hanya ada satu cara untuk menulis kod Sass: tulis dengan betul.

Jangan lupa bahawa lekukan mempunyai nilai boolean dalam Sass. Apabila lekukan blok pemilih digunakan, ini bermakna ia ialah pemilih bersarang.

Sebagai contoh:

.element-a color: hotpink .element-b float: left ... mengeluarkan kod CSS berikut: .element-a ( color : hotpink ; ) .element-a .element-b ( float : left ; )

Fakta mudah mengalihkan .elemen-b satu tahap ke kanan bermakna ia adalah unsur kanak-kanak daripada .element-a , yang menukar kod CSS yang terhasil. Jadi, berhati-hati dengan lekukan!

Saya percaya bahawa sintaks berasaskan lekukan akan lebih menarik kepada pasukan yang bekerja terutamanya dengan Ruby/Python berbanding pasukan pengaturcara PHP/Java (tetapi ini tidak pasti).

Kelebihan sintaks SCSS

Pertama, ia serasi sepenuhnya dengan CSS. Ini bermakna anda boleh menamakan semula fail CSS kepada .scss dan ia akan berfungsi seolah-olah tiada apa-apa yang berlaku.

Menjadikan SCSS serasi sepenuhnya dengan CSS sentiasa menjadi keutamaan untuk sokongan Sass sejak keluaran SCSS, dan pada pendapat saya ini adalah perkara yang kukuh.

Mereka juga cuba memerhatikan perkara yang mungkin menjadi sintaks CSS yang sah pada masa hadapan dan melaksanakannya (oleh itu @directives ).

Memandangkan SCSS serasi dengan CSS, ia hampir tidak memerlukan latihan tambahan. Sintaksnya hampir sama: lagipun, ia hanya CSS dengan beberapa tambahan.

Ini penting untuk pembangun baharu supaya mereka boleh memulakan pengekodan dengan cepat tanpa mengetahui banyak tentang Sass.

Ia juga lebih mudah dibaca kerana binaan khusus sudah masuk akal. Apabila anda melihat @mixin , anda tahu ia adalah pengisytiharan mixin; apabila anda melihat @include , anda tahu ia adalah panggilan mixin.

Tiada rentetan yang terikat dan semuanya masuk akal tanpa tafsiran.

Selain itu, hampir semua alatan, pemalam dan demo sedia ada untuk Sass dibangunkan menggunakan sintaks SCSS. Sintaks ini semakin berorientasikan kepada profesional dan dipilih oleh mereka secara lalai (jika ia bukan satu-satunya yang mungkin).

Terutamanya disebabkan oleh sebab-sebab yang dinyatakan di atas. Sebagai contoh, semakin sukar untuk mencari penyerlahan sintaks Sass tulen dengan lekukan; secara amnya hanya pilihan lampu latar SCSS tersedia.

Kesimpulan

Pilihan tetap milik anda, tetapi melainkan anda mempunyai sebab yang sangat menarik untuk menggunakan sintaks inden, saya amat mengesyorkan menggunakan SCSS berbanding Sass. Ia bukan sahaja lebih mudah, tetapi juga lebih mudah. Jika anda seorang pemula yang lengkap, maka SCSS adalah apa yang anda perlukan. Persamaan dengan CSS tidak akan menakutkan anda daripada mempelajari reka letak menggunakan prapemproses. Tetapi kemudian anda boleh mempertimbangkan untuk menggunakan Sass dalam projek anda. Perkara utama ialah jangan takut menggunakan teknologi baharu dalam kerja anda!

P.S. Sila ambil perhatian bahawa Sass tidak pernah disingkatkan daripada huruf besar, tidak kira sama ada ia adalah sintaks atau bahasa pengaturcaraan. Manakala SCSS sentiasa ditunjukkan dengan huruf besar.

Saya lebih suka sintaks SASS daripada SCSS kerana ringkasnya. Tetapi gaya bersarang besar-besaran dalam SASS boleh menghapuskan faedah ringkasnya dengan cepat. Walau apa pun, perbezaan antara SASS dan SCSS bukanlah asas. KURANG ternyata lebih dekat dengan SCSS daripada SASS. Dan, secara umum, ia adalah perkara yang sama. Tidak banyak perbezaan, tetapi beberapa daripadanya secara asasnya mengubah keseimbangan kuasa.

1. KURANG - boleh pihak pelanggan menggunakan JS.

Lebih tepat lagi, bukan dia boleh, dia direka untuk ini. Amalan biasa untuk menggunakan kod KURANG:

Pada masa itu keupayaan untuk menyusun pada pelayan (kedua-dua js dan ruby) telah ditambahkan kepadanya.

Sekali pandang ia kelihatan seperti harta yang pelik. Mengapa menyusun pada bahagian pelanggan jika anda boleh menyusun dengan sempurna pada pelayan dan menyediakan CSS termampat siap sedia seperti yang biasa kita lakukan dengan SASS?

Sebabnya menjadi jelas selepas mengkaji baris terakhir dokumentasi LESS yang tidak jelas:

@ketinggian: `document.body.clientHeight`;

Garis sunyi kecil seperti itu memberikan peluang yang hanya diimpikan oleh pereka susun atur sejak permulaan menguasai gaya. Memanggil skrip Java pihak klien daripada CSS dan mengambil kira tetapan penyemak imbas sebenar semasa membuat gaya.

Iaitu, kita kini mempunyai peluang untuk memuatkan DOM dahulu, dan kemudian menciptanya untuknya CSS tersuai betul-betul di sisi pelanggan. Kemudian fikirkan sendiri peluang yang terbuka ini.

Sama ada projek anda memerlukan ini adalah soalan yang berbeza. Jelas sekali bahawa semua orang sudah terbiasa dengan ketidakpastian/kebebasan pelanggan dan susun atur dalam gaya "kami melakukannya secara universal supaya ia akan lebih kurang ditunjukkan kepada semua orang pada semua resolusi." Tetapi ini bukan sebab untuk melupakan bahawa sekarang peluang sedemikian wujud dan dengan itu anda boleh lakukan, sebagai contoh, susun atur yang sangat fleksibel.

2. KURANG, tidak seperti SASS/SCSS, tidak mempunyai logik.

Tiada jika/maka, untuk, dsb. dalam KURANG. Walaupun, memandangkan JS mudah dibina ke dalamnya, saya fikir ia agak mungkin untuk mengubah logiknya. Saya belum mencubanya.

3. Mencampur lebih mudah dalam KURANG + anda boleh campur kelas.

Saya sangat menyukai hakikat bahawa dalam KURANG anda boleh memasukkan sifat kelas lain dalam definisi. Kelas itu sendiri adalah campuran. Ini adalah satu lagi ciri yang tidak ada pada SASS/SCSS. Anda boleh memasukkan fail CSS biasa dalam LESS dan menggunakan kelasnya untuk menentukan sifat anda. Sebagai contoh:

Bungkus (
text-wrap: bungkus;
ruang putih: pra-bungkus;
ruang putih: -moz-pre-wrap;
bungkus-kata: patah-kata;
}
pra ( .bungkus )

Ringkasan

Dengan pengecualian mata pertama, perbezaannya tidak hebat dan pilihan lebih besar untuk amatur.

Bagi saya secara peribadi, LESS kelihatan lebih menarik kerana kesederhanaannya. Saya tidak pernah memerlukan kitaran dan keadaan dalam gaya sebelum ini. Utiliti klasik seperti "bayang-kotak, kecerunan-linear, gelap" tersedia dalam LESS.

Ya, banyak perpustakaan siap sedia telah pun ditulis untuk SASS (