কিভাবে CSS @import নিয়ম ব্যবহার করবেন

কিভাবে CSS @import নিয়ম ব্যবহার করতে হয় তা জানুন স্টাইলশীট আমদানি করতে।

CSS @import at-রুল আপনাকে অন্যান্য CSS স্টাইলশীটে CSS স্টাইলশীট আমদানি করতে দেয়। এটি একটি বড়/ক্রমবর্ধমান কোডবেস সহ ওয়েবসাইটগুলির জন্য ব্যবহারিক৷

মৌলিক ব্যবহার:

@import url(variables.css);

এই পদ্ধতিটি আপনাকে ভেরিয়েবল, টাইপোগ্রাফি, রঙ, স্পেসিং ইত্যাদির জন্য আপনার CSS শৈলীগুলিকে পৃথক ফাইলে আলাদা করতে দেয় — আপনার সমস্ত শৈলী একটি বড় স্টাইলশীটে রাখার বিপরীতে।

তারপরে আপনি আপনার সমস্ত পৃথক CSS ফাইলগুলিকে আপনার প্রধান CSS স্টাইলশীটে আমদানি করতে পারেন যাতে সেগুলিকে একসাথে যুক্ত করতে:

/* Your main.css CSS file */
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

আপনার কোডবেস সময়ের সাথে সাথে বৃদ্ধির সাথে সাথে সবকিছু পরিষ্কার সংগঠিত রাখার এটি একটি ব্যবহারিক উপায়।

@import ব্যবহার করার সময় গুরুত্বপূর্ণ

@import ব্যবহার করার সময় জানা সবচেয়ে গুরুত্বপূর্ণ বিষয় আপনি আপনার @import রাখতে হবে আপনার প্রধান এর একেবারে শীর্ষে বিবৃতি CSS ফাইল (যেটি আপনি আপনার সমস্ত CSS ফাইল আমদানি করেন)।

উদাহরণ:

/* 
Your main.css CSS file 
Don’t add CSS above your import statements! 
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
You can add CSS below
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

আপনি যদি @import এর উপরে কোন CSS স্টাইলিং (আপনার প্রধান CSS ফাইলে) রাখেন বিবৃতি, এটা উপেক্ষা করা হবে.

মিডিয়া প্রশ্নের সাথে @import ব্যবহার করা

এছাড়াও আপনি @import ব্যবহার করতে পারেন শর্তসাপেক্ষে CSS স্টাইলশীট আমদানি করার জন্য বিবৃতি। উদাহরণস্বরূপ, যদি আপনার একটি নির্দিষ্ট স্টাইলশীট থাকে যা শুধুমাত্র স্মার্টফোনের মতো ছোট স্ক্রিনে লোড হওয়া উচিত, তাহলে আপনি আপনার @import-এ মিডিয়া ক্যোয়ারী সংযুক্ত করে তা নিয়ন্ত্রণ করেন। বিবৃতি:

@import "mobile.css" screen and (max-width: 768px);

উপরের উদাহরণে, mobile.css স্টাইলশীট শুধুমাত্র 768 পিক্সেলের সর্বাধিক প্রস্থের স্ক্রিনে কার্যকর হবে৷