Kisah CSS dan Ketepatan Sass

Cabaran susun atur peratusan: Perbezaan penyemak imbas dan isu ketepatan titik terapung

Susun atur peratusan sangat mencabar kerana ketidakkonsistenan penyemak imbas dan kekurangan spesifikasi ketepatan titik terapung, yang boleh menyebabkan penjajaran dan isu ketepatan.

Kelebihan SASS: Meningkatkan ketepatan dan kebolehbacaan kod

Sass adalah bahasa skrip preprocessor yang meningkatkan ketepatan dengan mengendalikan pengiraan kompleks dan menjadikan stylesheet lebih mudah dibaca dan dikemas kini. Walau bagaimanapun, pilihan ketepatan lalai SASS adalah 5, yang mungkin masih terlalu rendah untuk beberapa kes.

calc() Fungsi: Pengiraan penyemak imbas dan pembulatan

Fungsi CSS

calc(..) membolehkan penyemak imbas memproses pengiraan dan pembulatan, berpotensi menghasilkan hasil yang lebih baik. Fungsi ini, digabungkan dengan operasi SASS, menyediakan yang terbaik dari kedua -dua dunia untuk ketepatan CSS.

Di EdenspieKermann, kami bergantung pada kajian kod untuk memastikan kerja yang kami serahkan cukup baik ™. Satu perkara yang sering saya hadapi ialah kekaburan di sekitar nombor (terutamanya nombor dengan titik perpuluhan). Oleh itu, ini adalah artikel pendek yang bertujuan untuk menjelaskan isu ini.

Tetapan Awal

Untuk membuat penjelasan keseluruhan lebih jelas sebelum kita mula, kita akan bekerja pada sekeping kod kecil, yang sangat relevan dengan kes kita.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

apa masalahnya?

Anda mungkin tertanya -tanya apa yang salah dengan kod ini. Dari penampilan, tidak ada masalah besar. Ini adalah susun atur grid tiga lajur, yang agak biasa.

Walau bagaimanapun, 33% 33% sama dengan 99%, bukan 100%. Walaupun ini mungkin tidak membuat sebarang perbezaan dalam kebanyakan kes, apabila berurusan dengan penjajaran garis lurus - 1% boleh memberi impak besar. 1% daripada bekas yang lebar 14 piksel adalah 14 piksel. Ini adalah jarak yang jauh.

Kenapa kita tidak boleh memindahkan titik perpuluhan (atau menambahnya) untuk menjadikannya lebih tepat? Kami mungkin mengurangkan jurang kepada 1.4 piksel atau bahkan 0.14 piksel, yang saya rasa tidak lagi bernilai masalah! Kemudian mulakan di sini.

Ia berfungsi lebih baik, tetapi masih tidak sempurna. John Albin Wilkins membincangkan isu ini secara meluas dalam artikel ini bertajuk "Rahsia Respons Responsif Dirty Little." Sekiranya anda belum membacanya, baca.

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

tidak boleh penyemak imbas mengendalikan ini?

Pada ketika ini, anda mungkin tertanya -tanya mengapa penyemak imbas tidak boleh membuatnya berfungsi ™. Masalahnya adalah bahawa spesifikasi CSS tidak (ironinya) menentukan kepada vendor penyemak imbas apa yang perlu dilakukan dengan ketepatan titik terapung untuk nombor peratusan. Apabila spesifikasi CSS menghilangkan butiran, anda boleh memastikan bahawa setiap penyemak imbas akan mengendalikannya dengan cara sendiri.

Contoh berikut dari artikel di atas:

[...] Gunakan grid 6-kolumn dengan lebar 100% setiap lajur ÷ 6 = 16.666667%. Dalam viewport yang lebar 1000 piksel (saya dengan mudah memilihnya untuk menjadikan matematik lebih mudah), setiap lajur mengira kepada 166.66667 piksel. Oleh kerana spesifikasi tidak memberikan garis panduan, pengeluar pelayar bebas merumuskan peraturan mereka sendiri. Sekiranya penyemak imbas ke piksel terdekat, dalam contoh kami, kami akan mendapat 167 piksel. Tetapi sejak 167 x 6 = 1002 piksel, kami tidak lagi mempunyai ruang untuk menampung semua 6 lajur dalam pandangan kami. Atau, jika penyemak imbas turun ke 166 piksel setiap lajur, kami akan menjadi 4 piksel kurang daripada sempurna meletakkan semua lajur ke dalam pandangan kami. - John Albin Wilkins

Inilah yang berlaku. Versi lama Internet Explorer (terutamanya 6 dan 7) bulat ke integer terdekat, menyebabkan gangguan susun atur. Penyemak imbas WebKit ke bawah, yang menghalang sebarang hasil susun atur bencana, tetapi meninggalkan kami dengan ruang tambahan. Opera (sekurang -kurangnya dalam enjin rendering lama) melakukan sesuatu yang pelik yang saya terlalu malas untuk dijelaskan. Walau bagaimanapun, tidak ada peraturan untuk tingkah laku ini dalam spesifikasi, jadi siapa yang harus saya salahkan? Sudah tentu bukan pelayar yang menggunakan rendering subpiksel, kerana akhirnya ini adalah cara untuk menghasilkan hasil yang terbaik.

Bagaimanapun, ini hanya kekacauan dan kita akan membincangkan isu ini sekali lagi dalam kesimpulan artikel ini.

bagaimana dengan sass?

SASS menyokong operasi matematik. Ini bukan sesuatu yang baru, sebenarnya ia adalah salah satu daripada beberapa perkara yang digunakan SASS pada mulanya (untuk membina sistem grid berasaskan matematik). Kita boleh memberitahu Sass bahawa kita mahu membahagikan lebar bekas ke dalam 3 bahagian yang sama.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

kita juga boleh menggunakan fungsi peratusan (..) untuk mendapatkan hasil yang sama:

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

Dalam Ruby dan Libsass, pilihan ketepatan untuk SASS ialah 5. Ini sebenarnya masalah kerana ia sangat rendah;

Kod ini akan menjana CSS berikut:

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

Ini tidak menyelesaikan masalah penyemak imbas kami, tetapi ia membuat penulisan gaya lebih mudah. Bukan sahaja kita tidak perlu berurusan dengan pengiraan dan ketepatan diri kita, kita juga membuat kod lebih mudah dibaca dan dikemas kini dengan sebenarnya memaparkan pengiraan.

Saya rasa ini adalah perkara yang baik.

yang terbaik dari kedua -dua dunia

Setakat ini, kita telah belajar bahawa lebih baik untuk membiarkan SASS mengendalikan pengiraan untuk kita dan bukannya hardcode nilai -nilai. Sekarang, cara terbaik ialah membiarkan penyemak imbas mengendalikan ini dengan cara terbaik. Untuk melakukan ini, fungsi CSS calc(..) boleh digunakan.

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

Kod ini tidak akan disusun menjadi apa -apa. Ia muncul dalam penyemak imbas sebagai penulis menulis. Penyemak imbas kemudiannya bertanggungjawab untuk memanfaatkannya. Saya akan memberitahu anda dengan jujur ​​bahawa saya tidak pasti jika penyemak imbas mengendalikan nilai calc(..) seperti yang dilakukan dengan nilai biasa. Saya fikir mereka melakukan pengiraan dan kemudian bulat. Sesetengah pelayar seolah -olah menggabungkan subpiksel yang diberikan ke dalam persamaan. Sekiranya anda mempunyai sebarang pandangan mengenai perkara ini, sila kongsi dalam komen.

Untuk penyemak imbas yang tidak menyokong calc(..) ekspresi (terutamanya Internet Explorer 8 dan Opera Mini), kita boleh meletakkan nilai statik yang diwakili sebagai operasi SASS sebelum ini. Dengan cara ini, kita boleh mempunyai yang terbaik dari kedua -dua dunia.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Kesimpulan

mari kita semak dengan cepat. Pertama, susun atur peratusan sukar untuk ditangani kerana ketidakkonsistenan penyemak imbas dan kekurangan spesifikasi untuk ketepatan titik terapung.

Kemudian, nilai-nilai kod keras yang dihasilkan oleh beberapa pengiraan kompleks tidak biasanya merupakan idea yang baik. Kita boleh mempunyai sass mengira penghampiran (5 tempat perpuluhan).

lebih baik lagi, kita boleh mempunyai penyemak imbas mengira penghampiran. Dalam dunia yang ideal, apabila penyemak imbas bertanggungjawab untuk matematik dan rendering, ia sepatutnya dapat memanfaatkannya. Untuk bergerak ke arah ini, kami bergantung pada fungsi calc(..).

Ini hampir keadaan semasa. Tidak ada yang baru, tetapi saya fikir ulasan cepat akan membantu!

Soalan Lazim Mengenai CSS dan Ketepatan SASS (FAQ)

Apakah perbezaan antara CSS dan SASS?

CSS (Lembaran Gaya Cascading) adalah bahasa gaya yang digunakan untuk menggambarkan penampilan dan pemformatan dokumen yang ditulis dalam HTML. SASS (Smart Stylesheets dalam Sintaks) adalah bahasa skrip preprocessor yang ditafsirkan atau disusun menjadi CSS. Perbezaan utama antara kedua -duanya ialah SASS mempunyai ciri -ciri yang tidak wujud dalam CSS, seperti pembolehubah, bersarang, mixin, warisan, dll. Ciri -ciri ini menjadikan SASS lebih kuat dan fleksibel daripada CSS.

Bagaimanakah ketepatan berfungsi dalam CSS dan SASS?

Ketepatan dalam CSS dan SASS merujuk kepada perincian dan ketepatan rendering gaya. Dalam CSS, ketepatan sering terhad kerana kekurangan pembolehubah dan fungsi. Sass, sebaliknya, membolehkan ketepatan yang lebih tinggi terima kasih kepada ciri -ciri canggihnya. Sebagai contoh, anda boleh menentukan pembolehubah untuk warna atau saiz tertentu dan menggunakannya secara konsisten sepanjang stylesheet untuk memastikan ketepatan dan konsistensi dalam reka bentuk anda.

Bolehkah saya menggunakan sass dalam mana -mana projek web?

Ya, anda boleh menggunakan SASS dalam mana -mana projek web. SASS bersesuaian dengan semua versi CSS. Jadi, anda boleh bermula dengan CSS dan menambah ciri SASS seperti yang diperlukan. Walau bagaimanapun, ingatlah bahawa SASS memerlukan preprocessor untuk mengubahnya menjadi CSS yang dapat mentafsir pelayar.

Apakah faedah menggunakan SASS atas CSS?

SASS menawarkan beberapa faedah ke atas CSS. Ia membolehkan penggunaan pembolehubah, bersarang, mixin dan warisan, yang boleh menjadikan stylesheet anda lebih teratur, boleh diguna semula, dan mudah dikekalkan. SASS juga menyokong operasi matematik, yang membolehkan anda mengira dimensi dan warna secara langsung dalam lembaran gaya.

Bagaimana untuk meningkatkan ketepatan CSS atau kod SASS?

Anda boleh meningkatkan ketepatan CSS atau kod SASS anda dengan menggunakan pembolehubah untuk mendapatkan nilai yang konsisten, menggunakan operasi matematik untuk melakukan pengiraan yang tepat, dan menggunakan fungsi dan campuran untuk mendapatkan gaya yang boleh diguna semula. Di samping itu, menggunakan CSS Reset dapat membantu memastikan konsistensi antara penyemak imbas yang berbeza.

Apakah preprocessor CSS dan mengapa SASS memerlukannya?

Preprocessor CSS adalah bahasa skrip yang memanjangkan fungsi lalai CSS. Ia membolehkan anda menggunakan pembolehubah, peraturan bersarang, campuran, fungsi, dan operasi matematik dalam stylesheets. Sass adalah preprocessor CSS. Ia perlu kerana penyemak imbas hanya boleh mentafsir CSS. Oleh itu, kod SASS perlu disusun ke CSS sebelum ia digunakan dalam projek web.

bagaimana SASS membantu menulis kod kering (tidak mengulangi diri anda)?

Sass menyokong ciri -ciri seperti pembolehubah, mixin dan warisan, yang membantu menulis kod kering. Pembolehubah membolehkan anda menentukan nilai pada satu masa dan menggunakannya di beberapa tempat. Mixin membolehkan anda menulis gaya boleh diguna semula yang boleh dimasukkan dalam peraturan lain. Warisan membolehkan anda berkongsi satu set sifat CSS dari satu pemilih ke yang lain.

Apakah potensi perangkap menggunakan SASS?

Walaupun SASS menawarkan banyak kelebihan, ia juga mempunyai potensi perangkap. Keperluan untuk preprocessors dapat meningkatkan kerumitan proses pembangunan. Di samping itu, beberapa ciri SASS seperti bersarang dan mixin boleh menyebabkan output CSS menjadi kembung dan ketidakcekapan jika digunakan secara tidak wajar.

Bagaimana untuk memulakan pembelajaran dan menggunakan SASS?

Terdapat banyak sumber yang tersedia untuk mempelajari SASS dalam talian. Laman web rasmi SASS menyediakan panduan komprehensif untuk memulakan. Anda juga boleh mencari tutorial di laman web pembangunan web dan platform pembelajaran dalam talian. Untuk memulakan dengan SASS, anda perlu menyediakan preprocessor SASS dalam persekitaran pembangunan anda.

Bolehkah saya menukar kod CSS saya yang sedia ada ke SASS?

Ya, anda boleh menukar kod CSS sedia ada anda ke SASS. Oleh kerana SASS adalah superset CSS, mana -mana CSS yang sah adalah SASS yang sah. Anda boleh menamakan semula fail .css anda ke .scss (sassy css), dan kemudian secara beransur -ansur mula menggunakan ciri sass dalam kod anda.

Atas ialah kandungan terperinci Kisah CSS dan Ketepatan Sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!