সাস কি ? এবং কোডিং ইনভাইরোনমেন্ট সেট আপ

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

(বাংলা বানানও ভুল হতে পারে ক্ষমার দৃষ্টিতে দেখবেন )

সাস শুরু করার আগের শর্তঃ

  1. আমাদের অবশ্যই এইচটিএমএল এবং সিএসএস বেসিক টা জানতে হবে জানতে হবে বলতে আপনি মোটামুটি যতগুলো কমন ট্যাগ রয়েছে এবং সিএসএস এর মোটামুটি যত এট্রিবিউট রয়েছে এগুলি মোটামুটি জানলেই চলবে তাহলে আমরা সাস শিখার জন্য প্রস্তুত।
  2. তারপর আমাদের প্রয়োজন একটা কোড এডিটর অবশ্যই তারপর যদি ভিএস কোড হয় তাহলে ভালো হয় না হলে অন্য কোন কোন এডিটর ইউজ করতে পারেন তবে ভিএস কোডে করে দেখানোর চেষ্টা করব

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

তো আর কথা না বাড়িয়ে চলে যাই সাস ইন্ট্রোডাকশনে ।

আগে আমরা শিখার আগে আমাদের কাছে প্রশ্ন আসবে সাস আসলে কি?

Sass — Syntactically Awesome StyleSheets

Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world.

— Sass official website

Sass: একটি সুপার পাওয়ারফুল CSS প্রি-প্রসেসর। তার আগে আমরা একটু প্রি-পসেসর সম্পর্কে জেনে আসি ।

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax

গুগল বাবা

এবার আমরা একটু ভিতরে প্রবেশ করি আরেকটু খুটিয়ে দেখি আমরা গুগল থেকে যেটা পেলাম ।সিএসএস প্রি-প্রসেসর এমন একটি প্রোগ্রাম যেটা আপনার লিখিত সাস কোডটি সিএসএস কোড এ রুপান্তর করার প্রক্রিয়াকে প্রি প্রসেসর বলে ।

সাস রুবি দিয়ে লেখা একটা প্রোগ্রাম, যেটাতে আপনি কিছু অতিরিক্ত ফিচার পাবেন, আপনার সি.এস.এস লেখার সময়টা অর্ধেকেরও কমে নামিয়ে আনবে। আপনি ইচ্ছামত লজিক্যাল টার্ম ধরাই দিবেন আর কম্পাইলার সেটাকে সি.এস.এস এ রুপান্তরিত করে দিবে। সাস ব্যবহার করতে হলে আপনাকে অবশ্যই কম্পাইলার ব্যবহার করতে হবে। সংক্ষেপে আমার নিজস্ব ভাষায় এই হল সাস। আরো জানতে এইখান থেকে ঘুরে আসতে পারেন।তাহলে এবার একটু ফরমাল ভাষায় যদি বলি Sass হচ্ছে CSS এর একটি পাওয়ারফুল এক্সটেনশন। এর দ্বারা নেস্টেড রুলস, ভেরিয়েবল (variable), মিক্সিন, সিলেক্টর ইনহেরিটেন্স, ফাংশন, লুপ, কন্ডিশনস ইত্যাদি সহ আরো অনেক কিছু ব্যবহার করে আপনার CSS কোড কে অর্গানিজ করতে পারবেন। Sass প্রিপ্রসেসরে লিখা কোডকে কমান্ড লাইন টুলসের মাধ্যমে বা Sass বেসড ওয়েব ফ্রেমওয়ার্ক / প্লাগিন ইউজ করে স্ট্যান্ডার্ড CSS ফরম্যাট এ রূপান্তর করা হয়। Sass ব্যবহার করে কোডের redundancy, duplicacy কমানো যায়।

সাস ভার্শনঃ

বর্তমানে Sass ভার্সন ৩ ব্যবহার করা হচ্ছে যার এক্সটেনশন হলো ‘.scss’ (Sassy CSS) এটা CSS এর super set. এর আগে Sass এর old version এর এক্সটেনশন ছিলো ‘.sass’. আপনি চাইলে যেকোনো একটি ব্যবহার করতে পারেন। দুই ভার্সন এর মাঝে সামান্য একটু পার্থক্য বিদ্যমান।

SCSS এর কোডিং স্টাইল

SASS এর কোডিং স্টাইল

Image for post

এছাড়া Sass এর দুই ভার্সনে তেমন কোনো পার্থক্য নেই। আপনি চাইলে এ বিষয়ে বিস্তারিত জানতে পারবেন এখান থেকে।

Sass ইনস্টলেশন

Sass ব্যবহারের পূর্বে আপনার কম্পিউটার এ Sass ইনস্টল করতে হবে। Sass ইনস্টল করার অনেক গুলো পদ্ধতি রয়েছে। তার মধ্যে উল্লেখযোগ্য হচ্ছেঃ

Apps ইউজ করে Sass ব্যবহার

— Compass.app

— Koala

— Scout-App

Command লাইন ব্যবহার করে Sass ইনস্টল

Linux:

প্রথম ধাপ : আপনি যদি লিনাক্স (Debian/Ubuntu) ইউজার হয়ে থাকেন তবে প্রথমে নিচের কমান্ড ব্যবহার করে Ruby ইনস্টল করুন ।

$ sudo apt-get install ruby-full

সাকসেসফুলি Ruby ইনস্টল কমপ্লিট হলে আপনার টার্মিনালে ruby -v কমান্ড চালিয়ে সিওর হতে পারেন। এটি ruby ভার্সন চেকিং কমান্ড।

দ্বিতীয় ধাপঃ এবার টার্মিনালে নিচের কমান্ড চালিয়ে Sass ইনস্টল করুন।

$ sudo gem install sass অথবা gem install sass

সাকসেসফুলি Sass ইনস্টল কমপ্লিট হলে আপনার টার্মিনালে sass -v কমান্ড চালিয়ে সিওর হতে পারেন। এটি sass ভার্সন চেকিং কমান্ড।

সবকিছু ঠিক থাকলে Sass ভার্সন Sass 3.5.1 দেখাবে।

Windows:

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

তারপর এই পেইজ এ আসার প্র আপনি বড় বাটন এ ডাউনলোড অপশনটি পাবেন।

এবার এখান থেকে আমি কালো লিখাটি Ruby+Devkit 2.7.2.1(x64) ভার্সনটি ডাউনলোড করে নিচ্ছি । তারপর আমরা রুবি ইন্সটল দিলেই অটোমেটিক এটি ইন্সটল নিয়ে নিবে এবং সব ইনভাইরনমেন্ট ভেরিয়াবল ডিক্লেয়ার করে দিবে যদি ইনভাইরনমেন্ট ভেরিয়াবল ডিক্লেয়ার না হয় তাহলে অথবা হয়েছে কিনা চেক করার জন্য Path লিখে সার্চ করবেন

যদি এমন দেখতে পান ঠিক আমার মত তাহলে মনে করেন আপনার কাজ হয়ে গেছে এবার আপনার টারমিনাল খুলে

ruby -v

যদি আউটপুট

ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32]

দেখায় আলহামদুলিল্লাহ আপনার রুবি ইন্সটল আপনি প্রথম স্টেপ সফলতার সাথে পার করেছেন । আবার অনেকের নাও হতে পারে তাই আপনারা এই লিঙ্ক এর ইন্সটলেশন প্রসেস ফলো করতে পারেন.

এবার আমাদের পরবর্তী প্রসেস হচ্ছে আমরা আমাদের পিসিতে ইনস্টলেশন করব তার জন্য আমরা নিচের কমান্ডটি রান করব আমাদের সিএমডিতে

gem install sass

এবার যদি আপনার হাসান চেক করি যাতে আমরা বুঝতে পারি আমাদের পিসিতে অথবা আমাদের মেশিনে কি সাকসেসফুল ভাবে ইন্সটল হয়েছে নাকি তার জন্য আমরা নিজের এই কমান্ডটি সিএমডিতে রান করব

sass -v

যদি এখানে আমাদের সাস ভার্শনটি শো করে তাহলে বুঝতে হবে আমাদের পিসি তে সাস সাকসেসফুলি ইনস্টলড!

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

প্রিপ্রসেসিং

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

আমি আমার ফোল্ডারে একটি ফাইল করে নিচ্ছি নাম index.html আমি নিচের কোড গুলো ফাইল যুক্ত করছি

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn Scss With begainers</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This Is Quazi Mohammad Aldin Fardin</h1>
    <h3>Welcome to Stack Programmer</h3>

</body>
</html>

এখন আমরা ঠিক সেইম ফোল্ডার এ style.css ও style.scss নামে দুটি ফাইল ক্রিয়েট করব।এবার টার্মিনালে আমরা নিচের কমান্ডটি রান করব।

sass --watch input.scss:output.css

এখানে আমরা output এর জায়গায় আমাদের ক্রিয়েট করা সি এস এস ফাইল এর নাম লিখব আর input এর জায়গায় আমাদের সাস ফাইল এর নাম লিখব এবং আমাদের এই কমান্ড টি দুটি ফাইল এর মধ্যে লিঙ্কিং করবে। চলুন দেরি না করে শুরু করে দেই

এবার আমরা সাস ফাইলে নিচের কোড রান করি

h1{
    color: brown;
}
h3{
    color:brown;
}

তাহলে এবার এবার সিএসএস ফাইল চেক করি দেখবেন আমাদের সিএসএস কোডটা পেয়ে গেছে ।

আর এইচটিএমএল ফাইল টাও ঠিক মত কাজ করছে । দুঃখিত কালার চ্যেজ বাজে হইয়ায়

আজকের মত এখানেই সমাপ্ত নতুন পর্বের জন্য অপেক্ষা করেন

4 Shares:
1 comment

Leave a Reply