Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Sass ইন্টারপোলেশন সম্পর্কে যা যা জানা প্রয়োজন

by
Difficulty:IntermediateLength:MediumLanguages:

Bengali (বাংলা) translation by Tahmina Khatoon (you can also view the original English article)

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

ইন্টারপো... কী?

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

হুমম্ ।

ঠিক আছে, এর পরিবর্তে বরং একটা উদাহরণ দেয়া যাক । যদি আপনার পিএইচপি তে প্রাথমিক জ্ঞান থাকে, তবে বুঝতে কিছু সহজ হবে । ধরা যাক, আপনি একটা স্ট্রিং ইকো করতে চান যার মধ্যে একটা ভেরিয়েবল আছে । এর সাধারণ উপায় হল:

এটা ইন্টারপোলেশন হল না ।. এটা হল স্ট্রিং-কংক্যাটিনেশন বা স্ট্রিং-একত্রীকরণ. মূলত আমরা তিনটি স্ট্রিং: "Tuts+ is ","awesome" ( যা $description হিসাবে উল্লিখিত) এবং "!" একত্রিত ( পরস্পরের সাথে শৃঙ্খলাবদ্ধ) করেছি । এখন আমরা বরং স্ট্রিং-একত্রীকরণ এর পরিবর্তে ইন্টারপোলেশন ব্যবহার করতে পারি:

পিএইচপি তে ভেরিয়েবলের পাশে বন্ধনী চিহ্ন দিয়ে স্ট্রিং এর মধ্যে ভেরিয়েবলের মান বসানোর কথা বোঝানো হয়েছে । উল্লেখ্য এই জন্য পিএইচপি তে অবশ্যই ডাবল কোট বা উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে (যা অধিকাংশ ভাষার ক্ষেত্রে প্রযোজ্য) ।

যাই হোক, এই হল ভেরিয়েবল/এক্সপ্রেশন এর ইন্টারপোলেশন । এইক্ষেত্রে আপনি ইন্টারপোলেশন নাকি কংক্যাটিনেশন ব্যবহার করবেন তা আপনার উপরেই নির্ভর করছে, বরং বলা যায় ইন্টারপোলেশন হল স্ট্রিং একত্রীকরণের একটি সাবলীল বা সুমিষ্ট পদ্ধতি ।

মিষ্টি.

Sass এর ক্ষেত্রে কী হয়?

চলুন দেখা যাক Sass -এ ভেরিয়েবল প্রতিস্থাপন কিভাবে কাজ করে ।

পিএইচপি এর মতই Sass ভেরিয়েবল শুরু হয় ডলার চিহ্ন ($) দিয়ে । এইখানেই এদের তুলনা শেষ, কারণ যখন ইন্টারপোলেশন বা প্রতিস্থাপন এর বিষয় আসে, তখন Sass এবং পিএইচপি পুরোপুরি আলাদা আচরণ করে । আর এর অন্যতম কারণ হল: Sass রুবি দিয়ে তৈরী করা হয়েছে, যেখানে #{} এক্সপ্রেশন প্রতিস্থাপনের জন্য ব্যবহার করা হয় ।

Sass -এ, নিম্নলিখিতভাবে করা হয়:

লক্ষ্য করুন $ চিহ্ন পিএইচপি এর ভেরিয়েবলের নামের মত বিচ্ছিন্ন করা হয় নি । ভেরিয়েবলটিকে শুধুমাত্র #{} দ্বারা আবদ্ধ করা হয়েছে । স্ট্রিং ছাড়াও যেকোন টাইপের ভেরিয়েবলকে ইন্টারপোলেট বা প্রতিস্থাপন করা যায় । উদাহরণসরূপ:

কখন ইন্টারপোলেশন ব্যবহার করতে হবে?

ভেরিয়েবল ইন্টারপোলেশন কী এবং Sass এ ইন্টারপোলেশন কিভাবে করা হয় তা ইতিমধ্যে আপনি জেনেছেন, এখন সময় আসল ব্যবহার ক্ষেত্র সম্পর্কে জানার । প্রথমটার ক্ষেত্রে, আমরা @warn ডিরেক্টিভকে পুনরায় ব্যবহার করব, যা কনসোলে কন্টেন্ট বা বিষয়বস্তু প্রিন্ট করে ।

স্ট্রিংসমুহ

ধরা যাক একটি কালারের ম্যাপ হল $colors ( ম্যাপ হচ্ছে একটি ভেরিয়েবল যা কী-ভ্যালু জোড়া হিসেবে জমা রাখে ) কিন্তু আপনি বার বার map-get($colors, ...) এভাবে টাইপ করতে চান না, তাই আপনি কালার color() নামে একটা ছোট ফাংশন লিখে ফেলেন যার কাজ হল, যে "কী" পাঠানো হবে কালার ম্যাপ থেকে তার ভ্যালু বা মান ফেরত দেয়া । মৌলিক বিষয়টাকে এভাবে লিখা যায়:

এটা বেশ ভাল, তাই না? এখন একটা ব্যাপারে আপনি নিজেকে সতর্ক করতে চান যদি "কী" টাইপ করার সময় কিছু ভুল টাইপ করেন অথবা অজানা কোন "কী" এর মান জানতে চান (প্রসঙ্গক্রমে, আপনি এই প্রবন্ধটি introduction to error handling in Sass পড়ে দেখতে পারেন) । @warn ডিরেকটিভ দিয়ে color() ফাংশনে সেটাই করা হয়েছে ।

খারাপ না । এখন কি করব যদি জানতে চাই কোন "কী" টা পাওয়া যাচ্ছে না?

বুম, ভেরিয়েবল ইন্টারপোলেশন । color(awesomeness) কল করলে তা কনসোলে নিম্নলিখিত বার্তা প্রদর্শন করবে:

Key awesomeness not found.

আহ শান্তি, কিন্তু আমরা এখনো জানি না ভুল হবার বিষয়বস্তু বা সুত্রপাত কোথায় । সুতরাং নিজেদের ভবিষ্যতের কথা ভেবে, আমরা এখন ম্যাপের নাম ভুল বার্তার সাথে সংযুক্ত করব ।

এই ক্ষেত্রে, যেহেতু $colors ভেরিয়েবল ইন্টারপোলেট করা হয় নি, তাই এটা স্ট্রিং হিসেবেই প্রদর্শিত হবে ।

Key awesomeness not found in $colors map.

সিএসএস ফাংশন

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

মনে করি আপনি মেইন কন্টেইনারকে সাইডবার এর প্রস্থ অনুযায়ী সাইজ করতে চান । যেহেতু আপনি একজন কর্তব্যপরায়ণ ফ্রন্টএইন্ড ডেভলাপার, আপনি এই প্রস্থের মান একটি ভেরিয়েবলে জমা করলেন, সেজন্য আপনি যা করলেন:

অবাককান্ড! এটা কাজ করছেনা । Sass -এ কোন ভুল বার্তা নাই , কিন্তু কন্টেইনারের সাইজও ঠিকমত হয় নাই । এখন যদি আপনি এই স্টাইলটি ডেভ টুল দিয়ে পর্যবেক্ষণ করেন, তাহলে দেখতে পাবেন — এটা বাদ দেয়া হয়েছে, কারন এটা অকার্যকর:

এখন বিষয়টা ভেবে দেখাযাক: calc() একটি সিএসএস ফাংশন, Sass ফাংশন নয় । তারমানে হল Sass পুরো এক্সপ্রেশনকে একটা স্ট্রিং ধরে ইন্টারপ্রেট বা ভাষান্তরিত করেছে । আপনি এটা চেষ্টা করে দেখতে পারেন:

কারন এটা একটা স্ট্রিং, Sass এর এমন কোন কারন নাই আমাদের আগের @warn স্ট্রিং এর $colors ভেরিয়েবলের চেয়ে এখানে আলাদা ব্যবহার করবে । $sidebar-width স্বাভাবিক স্ট্রিং বিবেচনা করা হয়েছে, তাই যা আছে তাই প্রিন্ট হয়েছে । কিন্তু এটা তো তা না যা আপনি চান, তাই না? তাহলে ইন্টারপোলেট করা যাক!

এখন, যখন Sass স্টাইলসিট কম্পাইল বা সংকলন করবে, $sidebar-width এর মান দ্বারা #{$sidebar-width} ভেরিয়েবল পরিবর্তিত হয়ে যাবে, এক্ষেত্রে 250px, নিম্নলিখিত সঠিক সিএসএস এক্সপ্রেশন প্রদান করবে:

মিশন সুসম্পন্ন হল! এখানে আমরা শুধুমাত্র calc() সম্পর্কে কথা বললাম কিন্তু url(), linear-gradient(),radial-gradient(), cubic-bezier() এবং সুডো ক্লাশসহ অন্যান্য সিএসএস এর সব স্থানীয় ফাংশনের ক্ষেত্রেও তা একইরকম ।

এখানে সিএসএস ফাংশনের আরো একটি উদাহরন দেয়া হল:

আপনি সম্ভবত এমন একটি ক্ষেত্রের সম্মুখীন হয়েছেন: :nth-*() সিলেক্টর বা নির্বাচকের সাথে for লুপ ব্যবহার করার সময় । আরো একবার, ভেরিয়েবল ইন্টারপোলেট করতে হবে যাতে সিএসএস এর আাউটপুটে তা প্রদর্শিত হয় ।

সারকথা: Sass সিএসএস ফাংশনকে স্ট্রিং এর মত ব্যবহার করে, আর সেজন্যই কম্পাইলের ফলে প্রাপ্ত সিএসএস-এ ভেরিয়েবলের মান প্রদর্শন করতে চাইলে ব্যবহৃত সকল ভেরিয়েবলকে ইসকেপ করা প্রয়োজন ।

সিএসএস ডিরেকটিভস্

চলুন দেখা যাক ভেরিয়েবল ইন্টারপোলেশনের আরো একটি আকর্ষণীয় ব্যবহার: সিএসএস ডিরেকটিভস্, @support, @page এর মতই কিন্তু সবচেয়ে দরকারি @media.

এখন, যা দেখতে হবে তা হল Sass কিভাবে সিএসএস ডিরেকটিভ বিশ্লেষণ করে বা বুঝতে পারে, বিশেষ করে মিডিয়া ডিরেকটিভ । আমি এটা Sass কোডে খুঁজছিলাম, আর যদিও আমি রুবি খুব ভাল পারি না, তারপর ও আমি আকর্ষণীয় কিছু খুজেঁ পেয়েছিলাম:

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

এটা যে অকৃতকার্য হবে তাতে তো অবাক হবার কিছু নাই:

Invalid CSS after "@media ": expected media query (e.g. print, screen, print and screen), was "$value {"

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

আমরা আগেই Ruby escapade থেকে ধারনা করেছি, যদি @media এর ঠিক পরপরই (()) থাকে, তবে আর ভেরিয়েবল ইন্টারপোলেট করতে হবে না কারন বন্ধনীর ভিতরের সবকিছুই Sass মুল্যায়ণ করে । উদাহরণসরূপ:

এক্ষেত্রে, Sass (max-width: $value) এক্সপ্রেশনটি মুল্যায়ণ করে, (max-width: 1337px) তে পরিনত করে একটি সঠিক সিএসএস ফলাফল প্রদর্শন করে, তাই ভেরিয়েবল ইসকেপ করার কোন দরকার নাই ।

সেজন্য কেন Sass রক্ষণাবেক্ষণকারীরা এটা এইভাবে ডিজাইন করেছে, আমি নাথান উইজেনবামকে প্রশ্ন করেছিলাম । তার উত্তর হল:

সাধারণভাবে, যেখানে সম্পূর্ণ SassScript এক্সপ্রেশন ব্যবহার করা যায় না সেখানে আমরা র-ভেরিয়েবল অনুমোদন করি না । মিডিয়া কুইরী তেমনই একটি জায়গা, যেহেতু SassScript সেখানে দ্ব্যর্থক হতে পারে (বিশেষকরে ম্যাপ)।

— নাথান উইজেনবাম (@nex3) June 10, 2014

সিলেক্টর বা নির্বাচক

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

দুর্ভাগ্যবশত, এটা কাজ করে না:

Invalid CSS after "selector-": expected "{", was "$value {"

এটাও মিডিয়া কুয়েরীর উদাহরণের মত অনেকটা একই কারনে হয়েছে । Sass এর নিজস্ব নিয়ম রয়েছে সিএসএস সিলেক্টর বা নির্বাচক এর শব্দ বিশ্লেষণ করার জন্য । যদি এটা অনাকাংক্ষিত কোনকিছুর সম্মুখীন হয়, যেমন একটি আনইসকেপ ডলার সাইন, তখনই এটা বিপর্যস্ত হবে ।

সৌভাগ্যবশত, এই সমস্যার সমাধান খুবই সহজ ( এবং আপনি ইতিমধ্যে তা জেনে ফেলেছেন): ভেরিয়েবলটিকে ইন্টারপোলেট করা!

শেষ কথা

পরিশেষে বলা যায়, Sass ইন্টারপোলেশন এত সহজ নয়, যতটা মনে হচ্ছে । কিছু কিছু সময় আপনাকে ভেরিয়েবল ইসকেপ করতে হবে, আবার কিছু কিছু সময় তার দরকার নেই । সেইদিক থেকে বলা যায়, এই কাজটি আপনি দুটি উপায়ে করতে পারেন:

  • হয় আপনি ইরর মেসেজ আসা পর্যুন্ত অপেক্ষা করবেন, তারপর ইসকেপ করবেন
  • অথবা সাধারন সিএসএস ( যা আপনি জানেন যে ভালভাবেই কাজ করবে তা ) ছাড়া আপনি সব জায়গায় ইসকেপ করবেন

যাইহোক, আশাকরি ভেরিয়েবল ইন্টারপোলেশন কীভাবে কাজ করে তা অনুধাবন করতে আমি আপনাকে সাহায্য করতে পেরেছি । আপনি যদি কোন কিছু সংযুক্ত করতে চান, তাহলে অবশ্যই মন্তব্যের মাধ্যমে তা আমাদের জানাবেন ।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.