CSS @import রুল ব্যবহার করে স্টাইলশিট ইম্পোর্ট করা

CSS @import রুল ব্যবহার করে স্টাইলশিট ইম্পোর্ট করার পদ্ধতি শিখুন।

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

বেসিক ব্যবহার

@import url(variables.css);

এই পদ্ধতিতে আপনি আপনার CSS স্টাইলগুলো আলাদা আলাদা ফাইলে সংগঠিত করতে পারেন—variables, typography, colors, spacing ইত্যাদি জন্য আলাদা ফাইল। তারপর সেগুলো মেইন 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 স্টেটমেন্টগুলো আপনার মেইন CSS ফাইলের সর্বোপরি-এ থাকতে হবে। যেকোনো CSS স্টাইলিং যদি @import-এর উপরে থাকে, তা ইগনোর হবে।

/* Your main.css CSS file - Don't add CSS above imports! */ 
@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 ব্যবহার

কন্ডিশনালি স্টাইলশিট লোড করতে মিডিয়া কোয়েরি ব্যবহার করা যায়। উদাহরণস্বরূপ, শুধু মোবাইল স্ক্রিনে (ম্যাক্স-উইডথ ৭৬৮পিক্সেল) লোড হওয়ার জন্য:

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