README-UZ.md

PostCSS tartiblash media so'rovlari

🌏 English ▫ O'zbek

PostCSS CSS media so'rovlarini mobile first va desktop first metodologiyalari bilan ularni saralash va birlashtirish uchun xizmat qiladi.

5.0.0 plaginini qo'llab-quvvatlaydigan Media funksiyasi turlari: “diapazon”

Mundarija

• Onlayn demo
• Misollar
  • Mobile first
  • Desktop first
• O'rnatish
• Foydalanish
• Optsiyalar
  • Saralash
  • Maxsus tartiblash funksiyasi
  • Saralash konfiguratsiyasi
• O'zgarishlar jurnali
• Litsenziya
• Boshqa PostCSS plaginlari
• Rahmat 💪

Onlayn demo

Bu yerda: onlayn demo

Misollar

Mobile first

oldin

@media screen and (max-width: 640px) {
  .head { color: #cfcfcf }
}
@media screen and (max-width: 768px) {
  .footer { color: #cfcfcf }
}
@media screen and (max-width: 640px) {
  .main { color: #cfcfcf }
}
@media screen and (min-width: 1280px) {
  .mobile-first { color: #cfcfcf }
}
@media screen and (width > 640px) {
  .mobile-first { color: #cfcfcf }
}
@media screen and (max-width: 640px) {
  .footer { color: #cfcfcf }
}

keyin

@media screen and (width > 640px) {
  .mobile-first { color: #cfcfcf }
}
@media screen and (min-width: 1280px) {
  .mobile-first { color: #cfcfcf }
}
@media screen and (max-width: 768px) {
  .footer { color: #cfcfcf }
}
@media screen and (max-width: 640px) {
  /* combined */
  .head { color: #cfcfcf }
  .main { color: #cfcfcf }
  .footer { color: #cfcfcf }
}

Desktop first

oldin

@media screen and (width < 640px) {
  .header { color: #cdcdcd }
}
@media screen and (min-width: 760px) {
  .desktop-first { color: #cdcdcd }
}
@media screen and (width < 640px) {
  .main { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
  .desktop-first { color: #cdcdcd }
}
@media screen and (max-width: 760px) {
  .footer { color: #cdcdcd }
}
@media screen and (max-width: 640px) {
  .footer { color: #cdcdcd }
}

keyin

@media screen and (max-width: 760px) {
  .footer { color: #cdcdcd }
}
@media screen and (width < 640px) {
  /* combined */
  .header { color: #cdcdcd }
  .main { color: #cdcdcd }
  .footer { color: #cdcdcd }
}
@media screen and (min-width: 760px) {
  .desktop-first { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
  .desktop-first { color: #cdcdcd }
}

O'rnatish

Birinchi navbatda, modulni o'rnating:

npm install postcss postcss-sort-media-queries --save-dev

Foydalanish

Mavjud PostCSS konfiguratsiyasi uchun loyihangizni tekshiring: postcss.config.js loyiha ildizida, package.json ichidagi "postcss" bo`limida yoki to'plam konfiguratsiyasida "postcss".

Agar siz allaqachon PostCSS-dan foydalansangiz, plaginni plaginlar ro'yxatiga qo'shing:

module.exports = {
  plugins: [
+   require('postcss-sort-media-queries')({
+     sort: 'mobile-first', // default value
+   }),
    require('autoprefixer')
  ]
}

yoki maxsus tartiblash funksiyasi bilan

module.exports = {
  plugins: [
+   require('postcss-sort-media-queries')({
+     sort: function(a, b) {
+        // custom sorting function
+     }
+   }),
    require('autoprefixer')
  ]
}

Agar siz PostCSS-dan foydalanmasangiz, uni official docs ga muvofiq qo'shing va sozlamalarda ushbu plaginni o'rnating.

Optsiyalar

Saralash asosida ishlaydi, funktsiyasi dutchenkoOleg/sort-css-media-queries

Saralash

Ushbu parametr string yoki funktsiya qiymatlarini qo'llab-quvvatlaydi.

• {string} 'mobile-first' - (standart) mobil qurilmalarni tartiblash
• {string} 'desktop-first' - kompyuter qurilmalarni tartiblash
• {function} o'zingizning saralash funksiyangiz

'mobil-qurilmalar'

postcss([
  sortMediaQueries({
    sort: 'mobile-first' // standart
  })
]).process(css);

'kompyuter-qurilmalar'

postcss([
  sortMediaQueries({
    sort: 'desktop-first'
  })
]).process(css);

Maxsus tartiblash funksiyasi

postcss([
  sortMediaQueries({
    function(a, b) {
      return a.localeCompare(b);
    }
  })
]).process(css);

Ishbu misolda barcha media so'rovlaringiz A dan Z gacha tartib bo'yicha saralanadi

Ushbu tartiblash funksiyasi to'g'ridan-to'g'ri barcha media so'rovlaringiz qatorini Array#sort() usuliga o'tkaziladi.

Saralash konfiguratsiyasi

Ushbu konfiguratsiya orqali siz tartiblash xatti-harakatlarini boshqarishingiz mumkin.

postcss([
  sortMediaQueries({
    configuration: {
      unitlessMqAlwaysFirst: true, // yoki false
    }
  })
]).process(css);

Yoki muqobil ravishda loyihangiz ildizida “sort-css-mq.config.json” faylini yarating. Yoki “package.json”ingizga “sortCssMQ: {}” xususiyatini qo‘shing.

---

O'zgarishlar jurnali

Bu yerda: Releases history

Litsenziya

MIT

Boshqa PostCSS plaginlari

• postcss-momentum-scrolling - iOS tizimida toʻlib-toshgan (aylantirish, avtomatik) elementlar uchun momentum uslubidagi aylantirish harakatini qoʻshish uchun plagin (-webkit-overflow-scrolling:touch)

Rahmat

• Andrey Sitnik @ai
• Oleh Dutchenko @dutchenkoOleg
• Jakub Caban @Lustmored
• Dmytro Symonov @Kassaila
• Kai Falkowski @SassNinja
• Khayot Razzakov @Khayotbek1