CSS @function: Dinamik uslublar uchun maxsus funksiyalarni aniqlash imkoniyati

Veb-saytlar uchun uslublash tili bo'lgan CSS doimiy ravishda rivojlanib bormoqda. CSS o'zgaruvchilari (maxsus xususiyatlar) dinamik uslublashda sezilarli yutuqni ta'minlagan bo'lsa-da, @function qoidasi bu jarayonni yana bir qadam oldinga olib boradi. Bu dasturchilarga to'g'ridan-to'g'ri CSS ichida maxsus funksiyalarni aniqlash imkonini beradi, bu esa yanada murakkab va qayta foydalaniladigan dizaynlar uchun kompleks hisob-kitoblar va qiymatlarni boshqarishga imkon yaratadi. Ushbu blog posti @function imkoniyatlari, uning sintaksisi, qo'llanilish holatlari va CSS ish jarayonini qanday o'zgartirishi mumkinligini o'rganadi.

CSS @function tushunchasi

@function qoidasi - bu JavaScript yoki Python kabi dasturlash tillaridagi funksiyalarga o'xshash maxsus funksiyalarni aniqlash imkonini beruvchi CSS xususiyatidir. Bu funksiyalar argumentlarni qabul qiladi, ushbu argumentlar asosida hisob-kitoblar yoki manipulyatsiyalarni amalga oshiradi va CSS xususiyati qiymati sifatida ishlatilishi mumkin bo'lgan qiymatni qaytaradi.

@function paydo bo'lishidan oldin, shunga o'xshash natijalarga erishish uchun ko'pincha Sass yoki Less kabi preprotsessorlardan foydalanilardi. Ushbu preprotsessorlar kuchli vositalar bo'lib qolayotgan bo'lsa-da, tabiiy @function qoidasi bu funksionallikni to'g'ridan-to'g'ri CSS-ga olib keladi, bu esa bog'liqliklarni kamaytiradi va ish jarayonini soddalashtirishi mumkin.

@function sintaksisi

@function ning asosiy sintaksisi quyidagicha:

            @function function-name(argument1, argument2, ...) {
  // Funksiya tanasi: hisob-kitoblar, manipulyatsiyalar va h.k.
  @return value;
}
            

              
                Copy
              
            
          

• @function: Maxsus funksiya ta'rifining boshlanishini e'lon qiluvchi kalit so'z.
• function-name: Funksiyangiz uchun tanlagan nom. Bu nom standart CSS identifikator qoidalariga rioya qilishi kerak (harf yoki pastki chiziq bilan boshlanishi, so'ngra harflar, raqamlar, pastki chiziqlar yoki chiziqchalar bilan davom etishi).
• (argument1, argument2, ...): Funksiya qabul qiladigan argumentlar ro'yxati. Bular funksiya chaqirilganda unga uzatiladigan nomlangan qiymatlardir. Noldan ko'p argumentlar bo'lishi mumkin.
• { ... }: Funksiya tanasi, bajariladigan mantiq va hisob-kitoblarni o'z ichiga oladi.
• @return value: @return qoidasi funksiya qaytaradigan qiymatni belgilaydi. Bu qiymat oddiy son, rang, satr yoki har qanday yaroqli CSS qiymati bo'lishi mumkin.

CSS @function amaliy misollari

Keling, @function qudratini ko'rsatish uchun ba'zi amaliy misollarni ko'rib chiqaylik.

1-misol: Multiplikator asosida shrift o'lchamini hisoblash

Tasavvur qiling, siz turli elementlarning shrift o'lchamini asosiy shrift o'lchami va multiplikatorga qarab osongina sozlamoqchisiz. Siz shunday funksiya aniqlashingiz mumkin:

            @function calculate-font-size($base, $multiplier) {
  @return calc($base * $multiplier);
}

body {
  font-size: 16px;
}

h1 {
  font-size: calculate-font-size(16px, 2);
}

p {
  font-size: calculate-font-size(16px, 1.2);
}
            

              
                Copy
              
            
          

Bu misolda:

• calculate-font-size ikkita argument qabul qiladi: $base (asosiy shrift o'lchami) va $multiplier.
• U asosiy shrift o'lchamini multiplikatorga ko'paytirish uchun calc() funksiyasidan foydalanadi.
• @return qoidasi hisoblangan shrift o'lchamini qaytaradi.
• h1 elementi 32px (16px * 2) shrift o'lchamiga ega bo'ladi.
• p elementi 19.2px (16px * 1.2) shrift o'lchamiga ega bo'ladi.

2-misol: Yorqinlikni sozlash orqali ranglar yaratish

Siz @function yordamida asosiy rangga asoslangan rang o'zgarishlarini yaratishingiz mumkin. Bu, ayniqsa, bir xil tusdagi va har xil yorqinlikdagi ranglar sxemalarini yaratish uchun foydalidir.

            @function adjust-luminance($color, $amount) {
  @return color-mix(in srgb, $color, black $amount%);
}

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.button:hover {
  background-color: adjust-luminance(var(--primary-color), 20);
}

.button:active {
  background-color: adjust-luminance(var(--primary-color), 40);
}
            

              
                Copy
              
            
          

Bu misolda:

• adjust-luminance ikkita argument qabul qiladi: $color (asosiy rang) va $amount (aralashtiriladigan qora rang foizi).
• U asosiy rangni qora rang bilan aralashtirib, yorqinlikni sozlash uchun color-mix() funksiyasidan foydalanadi.
• @return qoidasi sozlangan rangni qaytaradi.
• Tugmaning :hover holati asosiy rangning to'qroq tusiga ega bo'ladi (20% qora rang aralashtirilgan).
• :active holati yanada to'qroq tusga ega bo'ladi (40% qora rang aralashtirilgan).

3-misol: To'r ustunlari kengligini hisoblash

Moslashuvchan to'rlarni yaratish ko'pincha murakkab hisob-kitoblarni o'z ichiga oladi. @function bu jarayonni soddalashtirishi mumkin.

            @function calculate-grid-column-width($total-columns, $column-span) {
  @return calc(($column-span / $total-columns) * 100%);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.grid-item {
  &.col-1 {
    grid-column: span 1;
    width: calculate-grid-column-width(12, 1);
  }

  &.col-2 {
    grid-column: span 2;
    width: calculate-grid-column-width(12, 2);
  }

  &.col-3 {
    grid-column: span 3;
    width: calculate-grid-column-width(12, 3);
  }
  // ... va hokazo, .col-12 gacha
}
            

              
                Copy
              
            
          

Bu misolda:

• calculate-grid-column-width ikkita argument qabul qiladi: $total-columns (to'rdagi umumiy ustunlar soni) va $column-span (to'r elementi egallashi kerak bo'lgan ustunlar soni).
• U ustunlar kengligi va umumiy ustunlar soniga qarab to'r elementining foizli kengligini hisoblaydi.
• @return qoidasi hisoblangan kenglikni qaytaradi.
• .col-1 klassi to'r konteynerining 1/12 qismiga teng kenglikka ega bo'ladi.
• .col-2 klassi to'r konteynerining 2/12 qismiga teng kenglikka ega bo'ladi va hokazo.

CSS @function dan foydalanishning afzalliklari

@function dan foydalanish bir nechta afzalliklarni taqdim etadi:

• Qayta foydalanish imkoniyati: Funksiyalarni bir marta aniqlang va ularni butun CSS bo'ylab qayta ishlating, bu izchillikni ta'minlaydi va kod takrorlanishini kamaytiradi.
• Qo'llab-quvvatlash qulayligi: Hisob-kitoblar yoki mantiqdagi o'zgarishlarni faqat bir joyda (funksiya ta'rifida) amalga oshirish kifoya, bu esa texnik xizmat ko'rsatishni soddalashtiradi.
• Dinamik uslublash: O'zgaruvchilar yoki boshqa kirish qiymatlariga asoslangan holda moslashadigan uslublar yarating, bu esa yanada moslashuvchan va responsiv dizaynlarga imkon beradi.
• O'qilishi osonligi: Funksiyalar murakkab hisob-kitoblarni o'z ichiga olgan holda CSS kodingizni o'qish va tushunishni osonlashtirishi mumkin.
• Preprotsessorlarga bog'liqlikning kamayishi (Potensial): Preprotsessorlar kengroq funksiyalarni taklif qilsa-da, @function ko'p hollarda ularga bo'lgan ehtiyojni yo'qotadi va loyihangizni sozlashni soddalashtiradi.

E'tiborga olinadigan jihatlar va cheklovlar

@function kuchli vosita bo'lsa-da, uning cheklovlaridan xabardor bo'lish muhim:

• Brauzer qo'llab-quvvatlashi: @function zamonaviy brauzerlarda umuman yaxshi qo'llab-quvvatlanadi. Biroq, uni production'da ishlatishdan oldin Can I Use ([https://caniuse.com/](https://caniuse.com/)) saytida moslikni tekshirish har doim yaxshi amaliyotdir. Eski brauzerlar uchun zaxira uslublarini taqdim etishingiz kerak bo'lishi mumkin.
• Murakkablik: Funksiyalardan haddan tashqari foydalanish yoki juda murakkab funksiyalarni yaratish CSS-ni tushunish va tuzatishni qiyinlashtirishi mumkin. Soddalik va aniqlikka intiling.
• Ishlash samaradorligi: Odatda samarali bo'lsa-da, funksiya ichidagi juda murakkab hisob-kitoblar rendering ishiga ta'sir qilishi mumkin. Kerak bo'lganda sinab ko'ring va optimallashtiring.
• Qo'shimcha ta'sirlarning yo'qligi: CSS funksiyalari sof funksiyalar bo'lishi kerak, ya'ni ular faqat o'zlarining kirish argumentlariga bog'liq bo'lishi va hech qanday qo'shimcha ta'sirga ega bo'lmasligi kerak (masalan, global o'zgaruvchilarni o'zgartirish).

CSS O'zgaruvchilari (Maxsus Xususiyatlar) bilan taqqoslash

CSS o'zgaruvchilari va @function birgalikda yaxshi ishlaydi. CSS o'zgaruvchilari qiymatlarni saqlaydi, @function esa bu qiymatlarni boshqaradi. Siz CSS o'zgaruvchilarini funksiyalaringizga argument sifatida ishlatib, juda dinamik va sozlanuvchan uslublar yaratishingiz mumkin.

CSS o'zgaruvchilarini *ma'lumotlar* va @function ni esa shu ma'lumotlarning *protsessori* deb tasavvur qiling.

CSS @property va @function: Sinergetik duet

@property at-qoidasi @function bilan birgalikda yanada ko'proq nazorat va moslashuvchanlikni ta'minlaydi. @property sizga maxsus xususiyatlarning turini, sintaksisini va boshlang'ich qiymatini aniq belgilash imkonini beradi, bu ularni animatsiya va o'tishlar uchun yaroqli qiladi. @function bilan birgalikda ishlatilganda, siz murakkab mantiq asosida dinamik ravishda hisoblanadigan va yangilanadigan maxsus xususiyatlar yaratishingiz mumkin.

Masalan, siz gradient burchagini ifodalovchi maxsus xususiyatni aniqlashingiz va keyin foydalanuvchi o'zaro ta'siri yoki boshqa omillarga asoslanib o'sha burchakni hisoblash uchun @function dan foydalanishingiz mumkin. Bu yuqori darajada interaktiv va dinamik vizual effektlarga imkon beradi.

CSS @function dan foydalanishning eng yaxshi amaliyotlari

@function dan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Funksiyalarni sodda saqlang: Bitta vazifani bajaradigan kichik, aniq belgilangan funksiyalarni yaratishga e'tibor qarating.
• Tavsiflovchi nomlardan foydalaning: Maqsadini aniq ko'rsatadigan funksiya nomlarini tanlang.
• Funksiyalaringizni hujjatlashtiring: Har bir funksiya nima qilishini va undan qanday foydalanishni tushuntirish uchun izohlar qo'shing. Bu, ayniqsa, jamoaviy loyihalar uchun muhim.
• Puxta sinovdan o'tkazing: Funksiyalaringiz turli brauzerlar va qurilmalarda kutilganidek ishlashiga ishonch hosil qiling.
• Chuqur ichma-ich joylashtirishdan saqlaning: Funksiyalarni haddan tashqari ichma-ich joylashtirish ishlash samaradorligi muammolariga olib kelishi va kodingizni tuzatishni qiyinlashtirishi mumkin.
• Kirish imkoniyatlarini hisobga oling: Funksiyalaringiz tomonidan kiritilgan o'zgartirishlar barcha foydalanuvchilar uchun kirish imkoniyatlarini saqlab qolishiga ishonch hosil qiling. Masalan, ranglarni sozlashda yetarli kontrast mavjudligini tekshiring.
• Xalqarolashtirish (i18n) jihatlari: Agar ilovangiz bir nechta tillarni qo'llab-quvvatlasa, funksiyalaringiz tilga xos bo'lishi mumkin bo'lgan birliklar va qiymatlarni qanday boshqarishiga e'tibor bering. Masalan, turli xil lokallar turli xil o'nlik ajratgichlar yoki raqam formatlaridan foydalanishi mumkin.

Global Qo'llanilish va Misollar

@function qoidasi turli xil global stsenariylarda qo'llanilishi mumkin. Mana bir nechta misollar:

• Dinamik mavzular: Bir nechta mavzuni (masalan, yorug' va qorong'u rejim yoki brendga xos rang sxemalari) qo'llab-quvvatlaydigan ilovalarda @function asosiy rangga asoslangan mavzuga xos rang o'zgarishlarini hisoblash uchun ishlatilishi mumkin. Bu moslashtirishga imkon bergan holda ilova bo'ylab izchillikni ta'minlaydi. Masalan, funksiya tanlangan mavzuga qarab asosiy rangning tusini va to'yinganligini sozlashi mumkin.
• Moslashuvchan tipografiya: Turli tillar optimal o'qilishi uchun har xil shrift o'lchamlari va qator balandliklarini talab qilishi mumkin. Funksiya aniqlangan foydalanuvchi tili yoki mintaqasiga qarab tegishli shrift o'lchamini hisoblashi mumkin. Bu matnning foydalanuvchining lokalidan qat'i nazar, o'qilishi oson va vizual jozibador bo'lishini ta'minlaydi. Masalan, Xitoy iyerogliflari ko'pincha lotin harflariga qaraganda biroz kattaroq shrift o'lchamlaridan foyda ko'radi.
• Lokalizatsiya qilingan raqam formatlash: width yoki margin kabi ba'zi CSS xususiyatlari mintaqaga qarab lokalizatsiya qilingan formatlashni talab qilishi mumkin. Funksiya ushbu xususiyatlarni foydalanuvchining lokaliga muvofiq formatlashi mumkin. Bu birliklarni o'zgartirish yoki turli xil ajratgichlardan foydalanishni o'z ichiga olishi mumkin. Masalan, ba'zi mamlakatlarda o'nlik ajratgich sifatida vergul ishlatilsa, boshqalarida nuqta ishlatiladi.
• O'ngdan-chapga (RTL) maketlar: Arab yoki ibroniy kabi RTL tillarida ba'zi CSS xususiyatlarini akslantirish yoki teskari tartibda joylashtirish kerak. Funksiya ushbu xususiyatlarni aniqlangan matn yo'nalishiga qarab avtomatik ravishda sozlashi mumkin. Bu maketning RTL tillarida to'g'ri ko'rsatilishini ta'minlaydi. Masalan, margin-left ni margin-right ga o'zgartirish kerak bo'lishi mumkin.

Xulosa

CSS @function - bu dinamik uslublash uchun maxsus funksiyalarni aniqlash imkonini beruvchi kuchli xususiyatdir. Uning sintaksisi, afzalliklari va cheklovlarini tushunib, siz undan qayta foydalanishga yaroqli, qo'llab-quvvatlanadigan va murakkab CSS kodini yaratish uchun foydalanishingiz mumkin. Veb-dasturlash loyihalaringizda yangi darajadagi nazorat va ijodkorlikni ochish uchun @function ni qabul qiling.

Turli xil qo'llanilish holatlari bilan tajriba qiling va @function CSS ish jarayoningizni qanday yaxshilashi mumkinligini o'rganing. Brauzerlarni qo'llab-quvvatlash yaxshilanib borar ekan, u shubhasiz zamonaviy veb-dasturchilar uchun muhim vositaga aylanadi. Haqiqiy global foydalanuvchi tajribasi uchun o'z ishlaringizda kirish imkoniyatlari va xalqarolashtirishni hisobga olishni unutmang.