কাটা SASS: কীভাবে সমস্ত কিছুর জন্য ইনলাইন জাভাস্ক্রিপ্ট স্টাইল ব্যবহার করা যায়।

আজ, ফ্রন্ট-এন্ড ওয়েব ডেভলপমেন্ট কেবল ওয়েব পৃষ্ঠাগুলি নয়, অ্যাপ্লিকেশন তৈরি সম্পর্কে। CSS এবং SASS পেজ স্টাইল করার জন্য দুর্দান্ত হলেও স্টাইলিং অ্যাপ্লিকেশনগুলির জন্য তারা দুর্দান্ত ছিল না। আপনি যদি কোনও উপাদান-ভিত্তিক কৌশল নিয়ে কাজ করছেন তবে এটি বিশেষত সত্য।

একটি উপাদান-ভিত্তিক কৌশল হ'ল আপনার অ্যাপ্লিকেশনটিকে ছোট ছোট পুনরায় ব্যবহারযোগ্য বিল্ডিং ব্লকগুলিকে বলা হয় যা উপাদানগুলি বলা হয় breaking আপনার অ্যাপ্লিকেশন তৈরি করতে উপাদানগুলি ব্যবহার করা আপনার সামনের প্রান্তটির পুনরায় ব্যবহারযোগ্যতা, স্পষ্টতা এবং দক্ষতা উন্নত করতে পারে।

কোনও উপাদান-ভিত্তিক পদ্ধতির পূর্ণ সুবিধা নিতে, আমাদের এমন উপাদানগুলির প্রয়োজন যা পুরোপুরি বৈশিষ্ট্য, মার্কআপ এবং শৈলীগুলিকে অন্তর্ভুক্ত করে।

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

জেএসে আপনার স্টাইলগুলি লেখার একটি বড় পরিবর্তন। সুতরাং আমরা কেন এটি করতে চাই তা বোঝাতে আমি কিছুটা সময় নিতে চাই। আমি সঠিক কাজের জন্য সঠিক সরঞ্জামটি বেছে নেওয়ার বিষয়ে বিশ্বাস করি। এসএএসএস এই সময়ের জন্য সঠিক হাতিয়ার হিসাবে নিশ্চিত ছিল এবং এটি কিছু দুর্দান্ত সুবিধা প্রদান করেছিল যেমন:

  • নীড়
  • পরিবর্তনশীল
  • মিক্সিনস

নেস্টিং একটি বিশাল সুবিধা ছিল কারণ আপনার স্টাইলগুলি আপনার মার্কআপটিকে প্রতিফলিত করতে পারে। তোমার যদি থাকত:

আপনি এটি করতে পারে:

এই সুবিধা আর দরকারী হিসাবে। আমরা এখনও আমাদের স্টাইলগুলিতে আমাদের মার্কআপকে প্রতিফলিত করতে খুব আগ্রহী, তবে আমাদের মার্কআপটি পরিবর্তিত হয়েছে!

আজকাল, আমরা এই উপাদানটি-ভিত্তিক দুটি পৃথক অংশে বিভক্ত করতে পছন্দ করি, "ইউজারলিস্ট" এবং "ব্যবহারকারী"। ফলাফল দুটি ফাইল, যেখানে "ব্যবহারকারীলিস্ট" এ "ব্যবহারকারী" এর পুনরাবৃত্তি সিরিজ থাকবে।

যেহেতু আমরা আমাদের অ্যাপ্লিকেশনটিকে উপাদানগুলিতে ভাগ করছি তাই আমাদের একই কৌশল ব্যবহার করে আমাদের স্টাইলগুলি লিখতে হবে। এর অর্থ হ'ল আমাদের উপাদানগুলির মার্কআপের সাথে আমাদের শৈলীগুলি সনাক্ত করার চেষ্টা করা উচিত যাতে তারা একসাথে আবদ্ধ হয়।

এটি অর্জনের একটি উপায় হ'ল ইনলাইন স্টাইলগুলি ব্যবহার করা, যেমন ক্যাসকেডিং স্টাইল শিটগুলির আগে তারা ব্যবহৃত হয়েছিল।

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

ভেরিয়েবল এবং মিক্সিনস

আমরা SASS বাসা বাঁধার কথা বললাম। অন্যান্য বড় সুবিধাগুলি - পরিবর্তনশীল এবং মিশ্রণের সম্পর্কে কী?

ওয়েল, এটি ঠিক তাই ঘটে এর জন্য আরও একটি মোটামুটি জনপ্রিয় সমাধান রয়েছে - জাভাস্ক্রিপ্ট!

স্টাইলিং সমাধানের জন্য আমাদের যা প্রয়োজন তা পেতে যদি আমরা "ভার" এবং "ফাংশন" এর জন্য জাভাস্ক্রিপ্টের প্রাকৃতিক ফাংশনগুলি ব্যবহার করতে পারি তবে কী দুর্দান্ত হত না? আমরা যখন আমাদের স্টাইলগুলি লিখতে জাভাস্ক্রিপ্ট ব্যবহার করি তখন আমরা জেএস সম্পর্কে যে নমনীয়তা, শক্তি এবং পরিচিতি অর্জন করি তা অর্জন করি। প্লাস! আমাদের পুরো উপাদানটি একক ভাষায় লেখা যেতে পারে! এমনকি একটি একক ফাইল!

আমাদের লক্ষ্য

আমরা যা করতে চাই তা এখানে:

  • মার্কআপের ঠিক পাশেই আমাদের স্টাইলগুলি রচনা করুন
  • রঙ বা ব্রেকপয়েন্টের মতো mpImport` এবং ʻExport` ভেরিয়েবল
  • স্থিতির উপর ভিত্তি করে "গতিশীল" শৈলী লিখুন (খোলা / বন্ধ মেনু ইত্যাদি)

এখানে আরও কিছু প্রয়োজনীয়তা রয়েছে:

  • সিউডো-রাজ্যগুলি অবশ্যই cover: হোভার,: আগে,: আফটারের মতো আবরণে আবশ্যক `
  • সরাসরি `@ মিডিয়া (সর্বাধিক প্রস্থ: 600px) like এর মতো মিডিয়া প্রশ্নগুলিকে সমর্থন করতে হবে
  • ফাংশন / টেরিনারিগুলিকে অনুমতি দিন (উপরে গতিশীলতা দেখুন)

পার্শ্ব নোট: "জেএস ​​স্টাইলস" এবং "জেএসএসে সিএসএস" এর মধ্যে পার্থক্য ব্যাখ্যা করুন

দুটি ভিন্ন পন্থা রয়েছে:

  • আপনি আপনার জেএসে সিএসএস অন্তর্ভুক্ত করতে পারেন
  • আপনি জেএস ব্যবহার করে আপনার সিএসএস লিখতে পারেন

আমি দ্বিতীয় পদ্ধতিটিকে পছন্দ করি এবং এটিই আমরা এখানে প্রবেশ করব।

প্রথম পদ্ধতির জন্য, সিএসএস মডিউলগুলি "জেএসে সিএসএস লেখার" বিভাগের একটি জনপ্রিয় সমাধান। এতে আপনি নিয়মিত সিএসএস অন্তর্ভুক্ত করেন যা আপনি `তে রেখেছেন` a একটি উপাদান লিখুন। নাম ফাঁক করা ক্লাস বা আইডি সহ ম্যানুয়ালি করা যেতে পারে। তবে এটি কেবল এই জাতীয় মান ব্যবহার করার জন্য যথেষ্ট নয়। ভেরিয়েবল সমর্থন বা মিক্সিনগুলির জন্য আপনাকে সিএসএস মডিউল সহ পোস্টসিএসএস বা এসএএসএস এর মতো সিএসএস বর্ধক ব্যবহার করতে হবে।

এখানেও আমরা ভেরিয়েবল, টেরেনারি বা ফাংশনগুলির মতো ভাষা ফাংশনগুলির জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে সক্ষম হতে চাই। যদি আমাদের সমাধান আমাদের জেএসের পরিবর্তে কিছু প্রকারের "উন্নত" সিএসএস লিখতে বাধ্য করে, তবে এটি আমাদের প্রয়োজনে কাজ করবে না।

উভয় পদ্ধতির জন্য অসংখ্য সিএসএস-ইন-জেএস সমাধান উপলব্ধ। চেষ্টা করে দেখুন! আপাতত, আমরা আমাদের লক্ষ্য এবং প্রয়োজনীয়তাগুলি পূরণ করতে সবচেয়ে ভাল বলে মনে করি তা বাস্তবায়ন করব।

চল শুরু করি!

আমরা ব্যবহার করবো:

  • ইএস 6 বাবেল দ্বারা রুপান্তরিত
  • আমাদের মার্কআপ রেন্ডার সাড়া
  • আমরা জেএস থেকে সিএসএস তৈরি করার জন্য এফ্রোডাইট লিখি।

প্রথমে ইউজারমেনু নামে একটি সাধারণ উপাদান তৈরি করুন। এটিতে সামান্য ব্যবহারকারীর অবতার এবং একটি মেনু থাকবে যা ক্লিক করার পরে নেমে আসবে।

আপনি এটি আপনার অ্যাপ পৃষ্ঠায় এটি ব্যবহার করতে পারেন:

মার্কআপটি গুরুত্বপূর্ণ নয়। এটি ES6 / stateless ফাংশন উপাদানগুলির জন্য সামান্য বিট সিনট্যাক্স সহ কেবল বেসিক প্রতিক্রিয়া বা এমনকি AngularJS।

স্টাইলিং শুরু করা যাক! এফ্রোডাইট দিয়ে শুরু করুন।

ডকুমেন্টেশনে বর্ণিত হিসাবে আমরা এফ্রোডাইট থেকে আমাদের প্রয়োজনীয় ফাংশনগুলি আমদানি করি।

আমদানিতে নোট: আমরা 'foo' থেকে সিনট্যাক্স-ইম্পোর্ট {বার with এর সাথে নির্দিষ্ট উল্লেখ আমদানি করি। আরও তথ্যের জন্য MDN আমদানি ডকুমেন্টেশন দেখুন

এখন আমরা একটি "কনস্ট" শৈলী লিখেছি এবং এতে থাকা "স্টাইলস" বিষয়বস্তু সহ "স্টাইলশীট.ক্রিয়েট ()" ব্যবহার করি। এটি অ্যাফ্রোডাইট ডকুমেন্টেশন থেকে। এফ্রোডাইট সন্নিবেশ "

আমরা "ব্যাকগ্রাউন্ড কালার" এর পরিবর্তে "ব্যাকগ্রাউন্ড কালার" লিখেছি। আমাদের সিএসএসের সমস্ত সম্পত্তি জেএস-এ উটযুক্ত হওয়া আবশ্যক! `মার্জিনলিফ্ট` বা` ফন্টসাইজ` বা `জাস্টিফ্যাক্ট কনটেন্ট` এর মতো` এটি আসলে অভ্যস্ত হয়ে উঠতে অনেকটা সময় নেয়, বিশেষত আপনি যদি আমার মতো জাভাস্ক্রিপ্ট লেখেন!

এটিই মূল কথা।

লাল ষড়্ভুজ রঙের পরিবর্তে, আমরা এখন একটি ব্র্যান্ডেড রঙ ব্যবহার করতে চাই। আমরা জাভাস্ক্রিপ্ট ভেরিয়েবল ব্যবহার করতে পারি। আসুন একটি `color.js` ফাইল সেট আপ করুন। এটি সম্পূর্ণ ফাইল:

আমাদের রঙের ভেরিয়েবলগুলি সমস্ত এই ফাইল থেকে রফতানি হয়। আমরা "var" এর পরিবর্তে "কনস্ট" ব্যবহার করি কারণ মানগুলি পুনরায় নিয়োগ না করা হয়। এখন আমরা ফাইলটি আমাদের উপাদানগুলিতে আমদানি করতে পারি এবং নীচে আমাদের রঙগুলি ব্যবহার করতে পারি:

আমাদের জেএস ভেরিয়েবলটি স্ট্রিংয়ের সাথে সংমিশ্রণে ব্যবহার করতে হবে এমন ক্ষেত্রে কী হবে? একটি প্রান্ত স্পেসিফিকেশন মত? সহজ। কেবল ES6 টেম্পলেট আক্ষরিক ব্যবহার করুন।

আমরা শুরু করছি. আমাদের ভেরিয়েবলটি আমাদের স্ট্রিংয়ের সাথে একত্রিত হয়।

সিউডো ক্লাস সম্পর্কে কী? সমস্যা নেই. অ্যাফ্রোডাইটের সিউডো ক্লাসের জন্য support: পূর্বে` এবং`: আফটার` এর জন্য দুর্দান্ত সমর্থন রয়েছে `

সিউডো-ক্লাসটি কেবল বাসা বাঁধে, তবে মূল নাম হিসাবে একটি স্ট্রিং ব্যবহার করুন (`: পূর্বে`)! উপরের উদাহরণে, ব্যবহারকারীর নামটির বামে একটি ছোট বৃত্ত তৈরি করা হয়েছে।

মিডিয়া প্রশ্নগুলি একইভাবে কাজ করে।

এখন আমাদের ব্রেক ব্রেক রয়েছে! প্যাডিংটি "600px" এর নীচে নামিয়ে আনা হয়েছে।

যদি আমরা এটিকে আরও একধাপ এগিয়ে নিয়ে যেতে এবং অ্যাপ্লিকেশনটিতে আমাদের ব্রেকপয়েন্টগুলি ট্র্যাক করতে চাইতাম তবে কী হবে? জাভাস্ক্রিপ্ট!

আমরা একটি পৃথক ফাইল তৈরি করব, ব্রেক-পয়েন্টগুলি লিখব যা আমরা স্ট্রিং হিসাবে ব্যবহার করতে চাই এবং সেগুলি ভেরিয়েবলগুলিতে বরাদ্দ করব।

এখন আমরা আমাদের .js ফাইলটি থেকে একটি ব্রেকপয়েন্টটি আমদানি করতে পারি এবং `রং.js` এর মতো করে একে চলক হিসাবে ব্যবহার করতে পারি`

"[আইসোমোবাইল]" আমাদের "ব্রেকপয়েন্টস.জেএস" ফাইল থেকে "@ মিডিয়া (সর্বাধিক প্রস্থ: 600px)" স্ট্রিংটিতে বিভক্ত এবং উদ্দেশ্য হিসাবে কাজ করে।

আসুন আমাদের চূড়ান্ত বাস্তবায়ন করি। আমরা যা শিখেছি সবগুলি সহ আমরা সবকিছু একসাথে রেখে যাব। আমরা একটি রাষ্ট্র-ভিত্তিক শৈলী তৈরি করতে যাচ্ছি যা উপাদানটি খোলা আছে বা বন্ধ রয়েছে তার উপর ভিত্তি করে মেনুটি দেখায়।

দ্রষ্টব্য: উচ্চ স্তরের থেকে ওপেন ভেরিয়েবলটি গ্রহণ করার সময় কিছু বিবরণ উপেক্ষা করা নিরাপদ। কেবল ধরে নিন যে এটি একটি অন্য জায়গায় পরিচালিত হয়েছে এবং আমাদের ডিভিতে ক্লিক করা এটি "সত্য" থেকে "মিথ্যা" তে টগল করে।

দ্রষ্টব্য 2: এই কোডটি পড়ার জন্য তীর ফাংশনগুলি বোঝা গুরুত্বপূর্ণ। আপনি তাদের অভ্যস্ত হয়ে উঠলে এগুলি দুর্দান্ত। এগুলি মূলত "ফাংশন" যা তাত্ক্ষণিকভাবে "ফিরে" আসে। এমডিএন-এ তীর ফাংশন।

আমাদের চূড়ান্ত কোডটি এখানে: (আপনি একটি কার্যকরী কোডপেন ডেমোটিও দেখতে পারেন))

মূল পরিবর্তনটি হ'ল আমরা আমাদের স্টাইলকে ধীরে ধীরে এমন একটি ফাংশনে কাস্ট করেছি যা কোনও স্টাইলশীট.ক্রিট অবজেক্ট দেয়। উপাদান থেকে আর্গুমেন্ট হিসাবে এটি ওপেন লাগে। যখন ওপেন পরিবর্তন হয়, তখন আমাদের মেনুটি আউট এবং আউট হয়ে যাবে।

কাজের ডেমো পরীক্ষা করে দেখুন

সিদ্ধান্তে

আমরা এই পদ্ধতির সাথে কি করেছি? ঠিক আছে, আমরা মোটামুটি জটিল উপাদান সম্পর্কে সমস্ত কিছুই একটি ফাইল এবং একক ভাষায় রাখতে সক্ষম হয়েছি।

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

এর অর্থ হল আপনার স্টাইলিং সমাধানটি সরাসরি আপনার সম্পূর্ণ অ্যাপ্লিকেশন আর্কিটেকচারকে প্রতিবিম্বিত করতে পারে। এই পদ্ধতির সাহায্যে আপনার কাঠামোর উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ রয়েছে। আপনি এই টুকরোগুলি স্থানান্তর করতে এবং এগুলি একসাথে রাখতে পারেন তবে আপনি মনে করেন এটি সর্বাধিক মানব পাঠযোগ্য এবং সবচেয়ে দরকারী কনফিগারেশন।

আমার অভিজ্ঞতায়, সর্বোত্তম পদ্ধতি হ'ল প্রচুর ছোট, সম্পূর্ণ বিচ্ছিন্ন উপাদান তৈরি করা। তাদের বেশিরভাগ হ'ল "স্টেটলেস" বা "বোবা" উপাদান যা কেবল অপরিবর্তনীয় অ্যাপ্লিকেশন আর্কিটেকচার বলা হয় যার উপর থেকে নীচে থেকে ডেটা গ্রহণ করে।

আমি এই উপাদানগুলিকে তাদের মার্কআপ, স্টাইল এবং ফাংশনগুলি অন্তর্ভুক্ত করতে পছন্দ করি। উপাদানগুলি পরিচালনা বা পরিবর্তন করা যখন তুচ্ছ হয় যখন কেবলমাত্র এক জায়গা এবং একটি পরিষ্কার নির্ভরশীলতা গাছ থাকে।

কারণ এই উপাদানগুলি কেবল একটি একক সমস্যা, ফাইলগুলি খুব কমই খুব বড় হয়। যদি এগুলি খুব জটিল হয়ে যায় তবে আপনি কেবল সেগুলি বিমূর্ত করতে পারেন বা এগুলিকে পৃথক উপাদানগুলিতে পুনরায় তৈরি করতে পারেন।

ইনলাইন জেএস শৈলীর আর একটি সুবিধা হ'ল আপডেটের কোড খুঁজে পাওয়া তুচ্ছ কারণ আপনার উপাদানগুলির জন্য যা কিছু প্রয়োজন তা একক ফাইলে।

এই উপায়ে তৈরি করা উপাদানগুলি ভাগ করাও সহজ কারণ আপনি সেগুলি একক জেএস ফাইল হিসাবে বিতরণ করতে পারেন। আপনার গ্রাহকরা তাদের নিজস্ব বিবেচনায় আমদানির ঘোষণাগুলি পূরণ করতে পারেন। আমদানি প্রতিক্রিয়া আমদানি কোণে পরিণত হতে পারে না এমন কোনও কারণ নেই

আশা করি আমি ইনলাইন জেএস শৈলীর শক্তি প্রদর্শন করেছি, তারা কীভাবে SASS প্রতিস্থাপন করতে পারে এবং উপাদান-ভিত্তিক বিকাশ সম্পর্কে কিছুটা অন্তর্দৃষ্টি পেয়েছে। এটি এমন একটি পদ্ধতির যা সত্যই আমাদের দলের পক্ষে কাজ করে। আমি আশা করি এটি আপনার পক্ষে কাজ করে!

অ্যান্ড্রু ডেভিস 2014 সাল থেকে ক্যাপিটাল ওয়ান এবং 2001 সাল থেকে ওয়েবের জন্য দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা ডিজাইন ও বিকাশ করেছেন।

মূলধন ওয়ান এপিআই, ওপেন সোর্স, সম্প্রদায় ইভেন্ট এবং বিকাশকারী সংস্কৃতি সম্পর্কিত আরও তথ্যের জন্য আমাদের ওয়ান স্টপ বিকাশকারী পোর্টাল ডেভ এক্সচেঞ্জ দেখুন। https://developer.capitalone.com/