Blog

CSS Variable কী এবং কেন এটি ব্যবহার করব?

css-variable
Tips & Tricks

CSS Variable কী এবং কেন এটি ব্যবহার করব?

আসসালামিু আলাইকুম । আশা করি সবাই ভাল আছেন। আমি আজকে আপনাদের সাথে CSS Variable নিয়ে আলোচনা করব ইনশা আল্লাহ।

প্রথমে যে প্রশ্নটা আপনার মাথায় ঘুরপাক খাচ্ছে যে

* Variable কী?

Variable এর বাংলা অর্থ হলো চলক। আপনারা ছষ্ঠ শ্রেণি থেকে চলকের  সাথে পরিচিত হয়ে আসছেন। আমরা যেমন চলকের একটি মান দিয়ে রাখি এবং পরে সেটা আমরা ব্যবহার করতে পারে। ঠিক তেমনি প্রোগ্রামিং ল্যাংগুয়েজে Variable বা চলকের ব্যবহার আছে। Variable  এ কোন ডেটা জমা রাখা যায়।

যেমনঃ

  1. JavaScript
  2. PHP
  3. Python
  4. Ruby
  5. C++
  6. C# 

ইত্যাদি।

দাঁড়ান ভাই কি বলছেন CSS তো কোন প্রোগ্রামিং ল্যাংগুয়েজ না । তাহলে এখানে Variable আসবে কিভাবে?

আপনার মনে প্রশ্ন আসাটা স্বাভাবিক কারণ CSS হচ্ছে Casecading Style Sheet. CSS এ Variable আসার আগে কিছু প্রোগ্রামিং ল্যাংগুয়েজ ব্যবহার করে এই কাজ  করা হতো । একে CSS Preprocessor বলে।

যেমনঃ

  1. Less 
  2. Sass

* Variable কেন ব্যবহার করব?

আমরা যখন কোন ওয়েব সাইট ডিজাইন করি  আমাদের ডিজাইনের মধ্যে কিছু মিল থাকে। দেখা যায় কিছু CSS এর কোড বারবার লেখা হচ্ছে। এতে করে আমাদের কোড বেশি লেখা লাগছে এবং একই কাজ বারবার করা লাগছে। একটি উদাহরণ দিলে ভাল বুঝতে পারবেন ।

মনে করেন আপনি ৯টি কার্ড ডিজাইন করছেন । প্রত্যেকটির আলাদা আলাদা সাইজ আছে এবং কোনটির কণাগুলো বাকানো আবার কোনটির না । কিন্ত সব কার্ডের শ্যাডো ও বরডার কালার একই।

এখন আপনি কী তাই প্রতিটি কার্ডের কোডে একই কোড বারবার লেখবেন। এরকম আরো সমস্যার সমাধাণ করার জন্য CSS Variable  আনা হয়েছে। 

CSS Variable  কে কাস্টম প্রোপারটিও বলা হয়। CSS Variable  কিভাবে ব্যবহার করতে হয়, কিভাবে লিখতে হয়, কিভাবে কাজ করে এবং কী কী করা যায় এটা লিখতে গেলে পোষ্টটি বড় হয়ে যাবে তাই পরর্বতী পোষ্টে জানাব ইনশা আল্লাহ । 

ততোক্ষণ পর্যন্ত সবাই ভাল থাকুন, সুস্থ্য থাকুন, নিজে কিছু করুন, অপরকে কিছু করার সুযোগ করে দিন । 

ধন্যবাদ সবাইকে এতোক্ষণ সাথে থাকার জন্য। 

Comment (1)

  1. Galib

    I knew this before but now it is clearer. To inform this topic thanks

Leave your thought here

Your email address will not be published.

Call Now

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping
Need Help? Chat with us