Apakah CSS3, SASS, SCSS, Kompas, Kurang, Bourbon

Panduan ini memberikan gambaran ringkas mengenai CSS3 dan beberapa preprocessors CSS yang popular. Untuk pemula, kami sangat mengesyorkan bermula dengan kompas!

css3:

versi terkini Cascading Style Helaian.

• menawarkan ciri -ciri canggih seperti animasi, peralihan, dan transformasi.
Belajar CSS3
• Demo CSS3 CSS3 Dokumentasi
sass & scss:

sass

(helaian gaya sintaktik yang mengagumkan): Ciri -ciri CSS yang menawarkan ciri -ciri seperti bersarang, pembolehubah, dan campuran. Menggunakan lekukan untuk sintaks. Pemprosesan sisi pelayan (biasanya dengan ruby).

• scss (sassy CSS): fungsional yang sama dengan SASS, tetapi menggunakan sintaks seperti CSS dengan pendakap keriting.
• laman web sass

dokumentasi SCSS

pemasangan sass Contoh:

Kompas:

/* CSS */
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

/* SCSS */
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

/* SASS */
li
  font:
    family: serif
    weight: bold
    size: 1.2em

rangka kerja CSS yang dibina di atas sass.

Menyediakan perpustakaan campuran yang berguna, ciri keserasian silang pelayar, dan corak tipografi.

memudahkan generasi sprite.
mudah dikemas kini melalui baris arahan.
laman web kompas
Demo Kompas

Pemasangan Kompas 1 Pemasangan Kompas 2 Contoh:

Kod Kompas:

Dihasilkan CSS:

kurang:

#opacity-10 {
  @include opacity(0.1);
}

/* For IE */
#opacity-10 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}

/* For other browsers */
#opacity-10 {
  opacity: 0.1;
}

• preprocessor CSS berasaskan JavaScript, diproses klien.
• menawarkan fungsi yang sama kepada sass (bersarang, pembolehubah, campuran).
• tidak mempunyai kerangka yang setara dengan kompas.

kurang laman web kurang demo dokumentasi kurang kurang vs sass

bourbon:

Perpustakaan Mixin Ringan untuk Sass.
berfungsi dengan lancar dengan alat seperti CodeKit dan Hammer.

laman web bourbon bourbon demo dokumentasi bourbon

(sila gantikan pemegang tempat yang ditandatangani dengan URL sebenar.) link-to...

Atas ialah kandungan terperinci Apakah CSS3, SASS, SCSS, Kompas, Kurang, Bourbon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!