Anda tidak memerlukan pra-pemproses CSS

CSS asli telah berkembang pesat dalam beberapa bulan/tahun kebelakangan ini. Dalam siaran ini, saya akan membincangkan sebab utama orang ramai menggunakan pra-pemproses css seperti SASS, LESS dan Stylus, dan menunjukkan kepada anda cara anda boleh mencapai perkara yang sama ini dengan CSS asli.

Mengasingkan fail

Memisahkan fail ialah salah satu sebab utama orang ramai mendapatkan pra-pemproses. Untuk beberapa lama sekarang walaupun anda telah dapat mengimport fail lain ke dalam fail CSS. Ia kelihatan seperti ini.

@import url("./utils.css");

Anda boleh menggunakan laluan relatif atau mutlak, sama seperti anda menggunakan href pada tag anchor atau mana-mana sumber lain.

Perbezaan utama antara pra-pemproses ini ialah semasa pra-pemproses akan bergabung kemudian pada penyusunan, CSS akan membuat permintaan http pada masa jalan.

Peraturan bersarang

Ok ini sebab utama guna pre-processor. Sekurang-kurangnya itu sebab utama saya menggunakan satu pada masa lalu.

Tetapi CSS kini menyokong sarang dan ia berfungsi kebanyakannya seperti biasa anda menggunakan prapemproses.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Agak hebat, satu kelebihan besar untuk menulis CSS seperti yang kami ada selama beberapa dekad.

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Pemilih sudo

Pemilih sudo berfungsi dengan cara yang sama dalam css asli yang mungkin anda biasa gunakan daripada pra-pemproses juga.

button {
  color: blue;

  &:hover {
    color: purple;
  }
}

Anda boleh membaca lebih lanjut tentang bersarang di MDN.

Pembolehubah

Sebab lama untuk prapemproses adalah pembolehubah. Anda boleh mempunyai semua warna anda, jarak dll dalam satu fail dan mengemas kini secara global di mana-mana sahaja.

Nah, anda boleh melakukannya dalam CSS asli sekarang, untuk beberapa lama. Malah dalam beberapa cara ia lebih baik daripada pra-pemproses.

Pembolehubah global

Pembolehubah global disertakan dalam peraturan :root. Ini boleh dirujuk di mana-mana sahaja.

:root {
  --bg-color: #333;
}

Untuk menggunakan pembolehubah, ia mesti dirujuk dengan teg var

button {
  background-color: var(--bg-color);
}

Pembolehubah berskop

Anda juga boleh menskop pembolehubah pada pemilih, contohnya...

header {
  --bg-color: #999;
}

Jadi dalam kes ini, merujuk var(--bg-color); dalam pemilih pengepala akan menghasilkan #999;

Menetapkan semula nilai pada masa jalan

Jadi kelebihan utama dengan pembolehubah css berbanding prapemproses, ialah pembolehubah itu boleh diatasi semasa masa jalan, di mana prapemproses sebaik sahaja ia disusun, ia kekal.

Jadi sebagai contoh jika anda mempunyai tapak web yang anda mahu menyokong mod terang dan gelap. Ini boleh dicapai dengan mudah menggunakan css vars.

:root {
  --bg-color: white;
}

body {
  background-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}

Untuk mencapai sesuatu seperti ini dengan prapemproses, anda perlu menogol kelas pada badan menggunakan Javascript dan mengatasi semua peraturan dengan kelas .dark atau sejenisnya.

Pengiraan

Kebanyakan pra-pemproses seperti LESS, Stylus atau SASS membolehkan anda membuat pengiraan tentang sesuatu. Suka jika anda ingin membahagikan pembolehubah kepada separuh ect.

Anda boleh melakukannya dalam css asli menggunakan fungsi calc.

@import url("./utils.css");

betapa hebatnya?

Mengubah warna

Jadi satu lagi ciri popular (sekurang-kurangnya bagi saya) ialah untuk mencerahkan dan menggelapkan warna dalam pra-pemproses css. Anda boleh melakukan ini dalam css asli sekarang juga menggunakan campuran warna.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Perkara di atas adalah bersamaan dengan perkara yang biasa anda lakukan dengan pencerah(merah, 50%) dalam prapemproses.

Untuk menggelapkan hanya campurkan dengan hitam dan bukannya putih

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}

Saya harap kali seterusnya anda memilih alatan yang hendak digunakan pada projek, anda akan mencuba css asli. Ia telah berjalan jauh.

Atas ialah kandungan terperinci Anda tidak memerlukan pra-pemproses CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!