বড় স্টাইলশিট ম্যানেজ করার সময় প্রায়ই একই লজিক বারবার ব্যবহার করতে হয়, বিশেষ করে গ্রেডিয়েন্ট বা রেসপন্সিভ লেআউট প্যাটার্নের মতো ডিজাইন সিস্টেম টোকেন নিয়ে কাজ করার সময়।
CSS @function at-রুল আপনাকে এই লজিককে আবার ব্যবহারযোগ্য, প্যারামিটারাইজড ফাংশনে এনক্যাপসুলেট করার অনুমতি দেয়, যার ফলে আপনার CSS আরও বেশি রক্ষণাবেক্ষণযোগ্য, সামঞ্জস্যপূর্ণ এবং DRY (নিজেকে পুনরাবৃত্তি করবেন না) হয়ে ওঠে।
@function সিনট্যাক্স
@function নিয়ম ব্যবহার করে কাস্টম ফাংশন সংজ্ঞায়িত করা হয়, যার পরে ড্যাশ দেওয়া নাম ও প্যারামিটারের তালিকা থাকে। ফাংশনটি result প্রপার্টি ব্যবহার করে একটি ভ্যালু রিটার্ন করে।
@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
/* Logic goes here */
result: var(--input1);
}
মূল ধারণা
- প্যারামিটার: অবশ্যই ডবল ড্যাশ (
--) দিয়ে শুরু হতে হবে। - ডিফল্ট: আপনি কোলন (
:) ব্যবহার করে ডিফল্ট ভ্যালু দিতে পারেন। - ফলাফল:
resultপ্রপার্টি ফাংশন থেকে পাওয়া ভ্যালু নির্ধারণ করে। ফাংশন বডিতে শেষresultঘোষিত হলে তা জিতে যায়। - স্কোপিং: ফাংশনের মধ্যে সংজ্ঞায়িত প্যারামিটার এবং ভেরিয়েবলগুলি স্থানীয়ভাবে স্কোপ করা হয়।
- ধরন: আপনি ব্র্যাকেট নোটেশন (যেমন,
<color>) সহ CSS ধরনের সাথে ম্যাচ করার জন্য প্যারামিটার ও রিটার্ন করা ভ্যালু সেট করতে পারেন এবংtypeফাংশন (যেমন,type(<number> | <percentage>)) সহ একাধিক ধরনের অনুমতি দিতে পারেন।
ব্যবহারিক উদাহরণ
১. ডিজাইন সিস্টেম টোকেন (গ্রেডিয়েন্ট)
গ্রেডিয়েন্ট লজিক এনক্যাপসুলেট করে আপনার অ্যাপ জুড়ে রঙের সমাহার সামঞ্জস্যপূর্ণ রাখুন। --angle সামঞ্জস্য বজায় রাখার জন্য একটি ডিফল্ট ভ্যালু প্রদান করে যা ওভাররাইড করা যেতে পারে।
@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}
.card {
background: --fancy-gradient(#ed73d7, #5d87e9);
}
২. কন্ডিশনাল লেআউট লজিক
পরিবেশের উপর ভিত্তি করে বিভিন্ন ভ্যালু রিটার্ন করতে আপনি সরাসরি কোনও ফাংশনের মধ্যে @media বা অন্যান্য কোয়েরি ব্যবহার করতে পারেন। কোনও ফাংশনে শর্তসাপেক্ষ লজিক ব্যবহার করার সময় মনে রাখবেন যে @function, result-এর প্রথম ভ্যালুতে "রিটার্ন" করে না, বরং CSS ক্যাসকেড অনুসরণ করে এবং স্ক্রিনের সাইজ, কন্টেনারের সাইজ বা অন্যান্য কোয়েরির উপর ভিত্তি করে ম্যাচ করা শেষ ভ্যালুতে সমাধান করে।
@function --grid-template(--count <number>){
/* MANDATORY: Put default value first. */
result: 1fr; /* Default: stack */
@media (min-width: 800px) {
result: repeat(var(--count), 1fr); /* Grid on larger screens */
}
}
main {
display: grid;
grid-template-columns: --grid-template(2);
}
পেশাদার পদ্ধতি
- ড্যাশযুক্ত নাম ব্যবহার করুন: আপনার ফাংশনের নাম ও প্যারামিটারের আগে সবসময়
--প্রিফিক্স ব্যবহার করুন। - ডিফল্ট প্রদান করা: সংবেদনশীল ডিফল্ট ভ্যালু প্রদান করে আপনার ফাংশন আরও শক্তিশালী করুন।
- সহজ রাখুন: এমন লজিকের জন্য ফাংশন ব্যবহার করুন যা আসলে বারবার ব্যবহার করা হয় বা জটিল। সহজ প্রপার্টি-ভ্যালু পেয়ারের ক্ষেত্রে অতিরিক্ত ইঞ্জিনিয়ারিং করবেন না।
- ব্যবহারের ধরন: আপনার প্যারামিটার এবং রিটার্ন ভ্যালু প্রত্যাশিত ধরনের কিনা তা নিশ্চিত করুন।
- প্রি-কম্পাইল করা বিকল্প ব্যবহার করার কথা বিবেচনা করুন: যেসব ফাংশন ব্যবহারকারীর ইনপুট, মিডিয়া কোয়েরি বা অন্যান্য ক্লায়েন্ট-সাইড ভেরিয়েশনের উপর নির্ভর করে না, সেগুলির ক্ষেত্রে ক্লায়েন্ট-সাইডে অপ্রয়োজনীয় কাজ এড়াতে CSS প্রি-কম্পাইলার ব্যবহার করার কথা বিবেচনা করুন।
ফলব্যাক স্ট্র্যাটেজি
যেসব ব্রাউজারে CSS ফাংশন কাজ করে না, সেখানে CSS ফাংশন ব্যবহার করে সেট করা ভ্যালু কাজ করবে না। অন্যান্য ব্রাউজারকে সাপোর্ট করতে, প্রথমে প্রপার্টির জন্য একটি ফলব্যাক ভ্যালু প্রদান করুন। CSS ফাংশন কাজ করে এমন ব্রাউজারে এটি ওভাররাইড করা হবে।
.card {
/* Provide fallback, in this case a solid color. */
background: #5d87e9;
background: --fancy-gradient(#ed73d7, #5d87e9);
}
main {
/* Provide fallback, in this case a simple stacked default. */
grid-template-columns: 1fr;
grid-template-columns: --grid-template(2);
}
অন্যান্য ব্রাউজার সাপোর্ট করার সময় স্টাইল রিপিটেশন কমানোর প্রয়োজন হলে, Sass-এর মতো ফাংশন সহ CSS প্রি-কম্পাইলার ব্যবহার করার কথা বিবেচনা করুন।