Online Tool Store
সিএসএস ভেরিয়েবল এক্সট্র্যাক্টর
সিএসএস পেস্ট করুন এবং প্রতিটি ভেরিয়েবল বের করুন: বিরোধপূর্ণ পুনর্সংজ্ঞা, অব্যবহৃত ও অসংজ্ঞায়িত ভেরিয়েবল শনাক্ত। :root, JSON বা var() তালিকা হিসেবে এক্সপোর্ট।
🔒 এই টুলটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে। আপনার ফাইল কখনও সার্ভারে আপলোড করা হয় না।
ব্রাউজার টুল
সিএসএস ভেরিয়েবল এক্সট্র্যাক্টর
এটি যেভাবে কাজ করে
- ইতিমধ্যে লোড করা উদাহরণ দিয়ে শুরু করুন, অথবা নিজের সিএসএস পেস্ট করুন।
- সারসংক্ষেপ দেখুন — পাওয়া প্রতিটি ভেরিয়েবল, বিরোধপূর্ণ মান সহ যেকোনো পুনর্সংজ্ঞা, এবং অব্যবহৃত বা অসংজ্ঞায়িত ভেরিয়েবল।
- প্রতিটি ভেরিয়েবলের সিলেক্টর, মান এবং অনুমিত ধরন (রঙ, দৈর্ঘ্য, ফন্ট ইত্যাদি) সহ পূর্ণ টেবিলটি দেখুন।
- একটি এক্সপোর্ট ফরম্যাট বেছে নিন — একটি পরিষ্কার :root ব্লক, JSON, বা একটি var() তালিকা — তারপর কপি বা ডাউনলোড করুন।
FAQ
এটি কি আমার ব্রাউজারে চলে?
হ্যাঁ। আপনার সিএসএস পেজেই স্থানীয়ভাবে প্রক্রিয়া করা হয় — কিছুই আপলোড হয় না, এবং কোনো অ্যাকাউন্ট লাগে না।
কোনটিকে পুনর্সংজ্ঞায়িত ভেরিয়েবল বলা হয়?
একটি কাস্টম প্রপার্টি যা একাধিকবার ভিন্ন মান দিয়ে ঘোষণা করা হয় — সাধারণত একটি :root ডিফল্ট মান এবং ডার্ক-মোড মিডিয়া কোয়েরি বা থিম ক্লাসের অধীনে একটি ওভাররাইড। প্রতিটি ঘটনা তার সিলেক্টর ও লাইন নম্বর সহ দেখানো হয়, যাতে আপনি ঠিক দেখতে পারেন কোথায় মানগুলো ভিন্ন, শুধু প্রথমটিকে চুপচাপ রেখে দেওয়ার বদলে।
এখানে "অব্যবহৃত" বা "অসংজ্ঞায়িত" মানে কী?
অব্যবহৃত মানে একটি ভেরিয়েবল -- দিয়ে ঘোষণা করা হয়েছে কিন্তু var() এর মাধ্যমে কোথাও ব্যবহার করা হয়নি। অসংজ্ঞায়িত মানে উল্টো — কিছু একটা var(--name) কল করে কিন্তু --name পেস্ট করা সিএসএসে কোথাও ঘোষণা করা নেই। রিফ্যাক্টরিংয়ের পরে উভয়ই সাধারণ অবশিষ্টাংশ, এবং অসংজ্ঞায়িত রেফারেন্সগুলোই আসলে ঠিক করার মতো, কারণ ব্রাউজার চুপচাপ প্রপার্টির প্রাথমিক মানে ফিরে যায়।
এটি কি @media বা অন্যান্য নেস্টেড ব্লকের ভেতরের সিএসএস হ্যান্ডেল করে?
হ্যাঁ। @media (prefers-color-scheme: dark) বা অনুরূপ কোনো at-rule এর ভেতরে নেস্ট করা একটি :root ব্লক সঠিকভাবে :root এর সাথে যুক্ত করা হয়, @media র্যাপারের সাথে নয়।
আমি কি নমুনা ডেটা ব্যবহার করতে পারি?
হ্যাঁ। উইজেটটি এমন একটি নমুনা দিয়ে লোড হয় যাতে ইচ্ছাকৃতভাবে একটি ডার্ক-মোড পুনর্সংজ্ঞা, একটি অব্যবহৃত ভেরিয়েবল এবং একটি অসংজ্ঞায়িত রেফারেন্স থাকে, যাতে আপনি নিজের সিএসএস পেস্ট করার আগে তিনটি পরীক্ষাই কাজ করতে দেখতে পারেন।
কোন কোন এক্সপোর্ট ফরম্যাট পাওয়া যায়?
একটি পরিষ্কার :root {} ব্লক, একটি সমতল JSON টোকেন ম্যাপ, অথবা var(--name) রেফারেন্সের একটি সাধারণ তালিকা — আপনি যেখানে ফলাফল পেস্ট করছেন তার সাথে যেটা মেলে সেটা কপি বা ডাউনলোড করুন।
আমার সিএসএস কোন ফরম্যাটে পেস্ট করা উচিত?
আপনার সিএসএস কাস্টম প্রপার্টিগুলো লাইনে একটি করে পেস্ট করুন, যেমন সেগুলো একটি :root ব্লকের ভেতরে থাকত, উদাহরণস্বরূপ `--brand: #0f766e;`। প্রতিটি লাইন বের করা তালিকার একটি সারি হয়ে যায়।
আমি কতটা সিএসএস পেস্ট করতে পারি তার কি কোনো সীমা আছে?
কোনো কঠোর সীমা নেই — সবকিছু আপনার ব্রাউজারে স্থানীয়ভাবে চলে, তাই এক্সট্র্যাকশনের গতি শুধু আপনার নিজের ডিভাইসের উপর নির্ভর করে, কোনো সার্ভারের উপর নয়।
আমরা কীভাবে তুলনায় দাঁড়াই
| ফিচার | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| যেকোনো সিলেক্টরের অধীনে ভেরিয়েবল খুঁজে পায়, শুধু :root নয় | ✓ | ✓ | শুধু :root যাচাই করা হয় |
| প্রতিটি ঘটনা দেখিয়ে বিরোধপূর্ণ পুনর্সংজ্ঞা চিহ্নিত করে | ✓ | দেখানো হয় না | চুপচাপ শুধু প্রথমটি রাখে — অনুপস্থিত ওভাররাইড ধরা পড়ে না |
| অব্যবহৃত ভেরিয়েবল ও অসংজ্ঞায়িত var() রেফারেন্স চিহ্নিত করে | ✓ | দেখানো হয় না | ব্যবহার অডিট করার দাবি সত্ত্বেও দেখানো হয় না |
| @media এর ভেতরের :root প্রকৃত সিলেক্টরে সমাধান হয় | ✓ | প্রযোজ্য নয় — শুধু :root আউটপুট | দেখানো হয় না |
| :root ব্লক, JSON, বা var() তালিকা হিসেবে এক্সপোর্ট | ✓ | ✓ | শুধু সাধারণ তালিকা |
অডিট করার যোগ্য যেকোনো বাস্তব সিএসএস ফাইলেই একটি ডার্ক-মোড ওভাররাইড বা ভুলে যাওয়া অব্যবহৃত টোকেন থাকে — ঠিক এই ক্ষেত্রটিই শুধু নাম-মিলিয়ে-দেখা এক্সট্র্যাক্টর মিস করে যায়, আর ঠিক এখানেই এটিকে সরাসরি তাদের বিপরীতে যাচাই করা হয়েছে।