সাস @ এক্সটেন্ড ডাইরেক্টিভ দিয়ে আপনার সিএসএস উন্নত করুন

কন্টেন্ট

• প্রসারিত করা হচ্ছে
• সমস্যাগুলি প্রসারিত করুন
• স্থানধারক নির্বাচক

প্রথমবারের মতো সিএসএস প্রবীণ সাসকে আবিষ্কার করা সবসময় বিনোদনমূলক। নেস্টিং, ভেরিয়েবল এবং মিক্সিনের মত ধারণাগুলি এতটাই স্বাভাবিক বলে মনে হয় এবং একবার সিনট্যাক্স স্মৃতিতে প্রতিশ্রুতিবদ্ধ হয়, তাদের উপলব্ধতার আগে একটি সময় মনে রাখা কঠিন। ত্রাণ সর্বাধিক সাধারণ আবেগ: একটি স্বীকৃতি যে হেক্সাডেসিমাল মানগুলি ম্যানুয়ালি উপসর্গ করা এবং অনুলিপি করার দিনগুলি কেটে গেছে।

প্রিপ্রোসেসর @ এক্সটেন্ডারে পাওয়া মূল ধারণাগুলির মধ্যে তিনটি কারণ রয়েছে: এটি আপনার কর্মপ্রবাহকে মারাত্মকভাবে পরিবর্তন করার সর্বোচ্চ সম্ভাবনা রয়েছে; অপব্যবহার আপনার স্টাইলশিটের স্বাস্থ্যের পক্ষে বিপজ্জনক; এবং নতুনরা এটির সাথে অন্যান্য সাস কার্যকারিতার চেয়ে অনেক বেশি লড়াই করে। নিরাপদে @ এক্সটেন্ড ব্যবহার শুরু করতে অনুগ্রহ করে নিদর্শনগুলি অনুসরণ করুন।

• এই টিউটোরিয়ালের জন্য উত্স কোডটি ডাউনলোড করুন

প্রসারিত করা হচ্ছে

যখন দুটি নির্বাচক স্ট্যান্ডার্ড সিএসএসে শৈলীগুলি ভাগ করে, তখন সম্পর্কটি কমা দ্বারা আলাদা একটি তালিকায় উপস্থাপিত হয়:

.সাইডবার, .নোটাইস {মার্জিন: 20px; }}

সাস @ নির্বাচিত নির্দেশকের সাথে নির্বাচকদের একত্রিত করে:

.সাইডবার {মার্জিন: 20px; not .নোটাইস {@ এক্সটেন্ড .সাইডবার; }}

এটি একটি ছোট স্কেলে অকার্যকর প্রদর্শিত হতে পারে তবে যাদুটি আপনার স্টাইলশীটের মধ্যে যে কোনও জায়গা থেকে এই সম্পর্কগুলি তৈরি করতে সক্ষমতার মধ্যে রয়েছে। নির্বাচক যে কোনও নম্বর (বা টাইপ) .সাইডবারে পাওয়া শৈলীর প্রসারকে বাড়িয়ে দিতে পারে। নির্বাচিতদের ম্যানুয়ালি একত্রিত করার জন্য আপনাকে সম্পত্তি আপডেট করার জন্য এটি একক জায়গা তৈরি করে। আসুন আরও সাধারণ প্যাটার্নটি একবার দেখুন। এটি খুব সাধারণ উদাহরণটি দেখায় যে কীভাবে একটি সাধারণ বোতাম শ্রেণি তৈরি করা যায় এবং বেস বৈশিষ্ট্যগুলি সংশোধন করতে অতিরিক্ত শ্রেণি যুক্ত করা যায়:

.btn {হরফ ওজন: গা bold়; b .বিটিএন-ত্রুটি {পটভূমি: লাল; b .btn-next {পটভূমি: সবুজ; }

আমাদের এইচটিএমএল .btn এবং .btn- ত্রুটির ক্লাস যুক্ত করার পরিবর্তে, যখনই একটি লাল বোতামের প্রয়োজন হয়, মূল বোতাম শৈলীর ত্রুটি অবস্থায় প্রসারিত করুন:

.btn-error {@extend .btn; পটভূমি: লাল; }

এখন, যখন আমাদের সাস কম্পাইল করে, .btn নির্বাচনকারী .btn, .btn- ত্রুটি হয়ে যায়। তালিকাটি স্বয়ংক্রিয়ভাবে রক্ষণাবেক্ষণ করা হয় এবং কেবলমাত্র একটি উপাদানের সাথে .btn- ত্রুটি যুক্ত করা সমস্ত প্রয়োজনীয় স্টাইলিংয়ের প্রয়োগ করে।

সমস্যাগুলি প্রসারিত করুন

নেস্টিংয়ের মতো, @ এক্সটেন্ড ডাইরেক্টিভটি যদি দায়িত্বহীনভাবে বা ফলস্বরূপ সংযোগগুলি না বুঝে ব্যবহার করা হয় তবে তা সমস্যার কারণ হতে পারে।

বোতামগুলির উদাহরণ সহ চালিয়ে চলুন, আমরা ভান করি যে আমরা প্রসারিত করেছি .btn ভিতরে .btn- পরের মতো আমরা .btn- ত্রুটিটি করেছি। অবশেষে, যখন বেসের বোতামটি কোনও ফর্মের অভ্যন্তরে উপস্থিত হয় তখন আমাদের টুইট করতে হবে:

form .btn {সীমানা-ব্যাসার্ধ: 5px; }

সাধারণত, এটি একটি বৈধ শৈলী জাজক। তবে .btn প্রসারিত অন্যান্য নির্বাচকদের যখনই সমীকরণের আওতায় আনা হয় .btn হাজির হয়:

form .btn, form .btn-error, form .btn-next {সীমানা-ব্যাসার্ধ: 5px; }

কিছু ক্ষেত্রে, আপনি চাইবেন যে বিস্তৃত সমস্ত কিছুই এখানে অন্তর্ভুক্ত করা হোক, এটি একটি ছোট স্কেলের পক্ষে খুব বড় বিষয় নয়। তবে, যদি এক ডজন ক্লাস বেস বোতামটি প্রসারিত করে, এবং আমাদের ফলস্বরূপ স্কোপড চেইনের প্রয়োজন না হয়, তবে আমরা ফেটে যাচ্ছি। মাঝারি থেকে বড় অ্যাপ্লিকেশনগুলিতে, অবসন্ন হয়ে যাওয়া আপনার ফাইলের আকারে সহজেই একটি অতিরিক্ত 30% বা আরও বেশি ব্যবহার করতে পারে। দুর্বল বাসা বাঁধার সাথে মিলিত হয়ে এটি গুরুতর সমস্যাতে পরিণত হতে পারে।

স্থানধারক নির্বাচক

স্থানধারক নির্বাচকদের সাস ৩.২-এ প্রবর্তন করা হয়েছিল এবং এটি একটি এক্সটেনড হুক অফার করে যা কোনও নিজস্ব নির্বাচককে সংকলন করে না। অপ্রয়োজনীয় @ এক্সটেন্ডেড নির্বাচকদের গোষ্ঠীগুলি মোকাবেলায় একজন স্থানধারক নির্বাচনকারী নিয়োগ করুন:

% সাইডবার {মার্জিন: 20px; not .নোটাইস {@ এক্সটেন্ড% সাইডবার; }

একটি% চিহ্ন কোনও স্থানধারক নির্বাচককে চিহ্নিত করে এবং যখন কিছু প্রসারিত হয় তখন কেবল সংকলিত শৈলীর পরিবর্তন করে। আমাদের বোতামের উদাহরণটি ফিরে দেখুন, মূল প্রসারিতগুলি সরিয়ে চেষ্টা করুন এবং পরিবর্তে একটি স্থানধারক নির্বাচক ব্যবহার করুন:

.btn,% বিটিএন {ফন্ট-ওজন: গা bold়; b .btn- ত্রুটি {@ এক্সটেন্ড% বিটিএন; পটভূমি: লাল; b .btn-next {@exend% বিটিএন; পটভূমি: সবুজ; }

স্থানধারক নির্বাচক সংযোজন সহ আমাদের দুটি সংশোধক শ্রেণি .btn নির্বাচকের পরিবর্তে স্থানধারককে প্রসারিত করে। এটি ফোলা ছাড়াই .btn বৈশিষ্ট্যের পুনঃব্যবহার (এবং স্কোপিং) এর অনুমতি দেয়। যদি আমাদের নিজস্ব একটি .btn নির্বাচনকারী ব্যবহার করার প্রয়োজন না হয়, তবে এখানে একা স্থানধারক ব্যবহার করা যেতে পারে।

form .btn {সীমানা-ব্যাসার্ধ: 5px; }

এখন, নেস্টেড পরিবর্তনটি .btn এ পরিবর্তিত হয়ে কেবল .btn গঠনের জন্য সংকলন করে - এবং আমরা সম্ভাব্য ব্লাট হুমকিকে সরিয়ে দিয়েছি।

দীর্ঘ নির্বাচক চেইনের জন্য সর্বদা সংকলিত স্টাইলশিটগুলি পরীক্ষা করুন এবং যেগুলি বিভ্রান্ত হয়েছে সেগুলি প্রসারিত করে। বলা হচ্ছে, @ এক্সটেন্ড, নেস্টিং এবং স্থানধারক নির্বাচকদের সাথে পরীক্ষার চেষ্টা করুন। এটি পুরোপুরি উপলব্ধি করতে কিছু পরীক্ষা এবং ত্রুটি লাগবে, তবে কিছু সত্যই উল্লেখযোগ্য কাঠামোগুলির অনুমতি দেয়।

শব্দ: নিক ওয়ালশ

এই নিবন্ধটি মূলত নেট ম্যাগাজিনের 239 সংখ্যায় প্রকাশিত হয়েছিল