This guide will walk you through the basics of SCSS (Sassy CSS) to more advanced techniques, helping you understand how to write clean, organized, and scalable CSS using SCSS. Whether you're a beginner or looking to improve your skills, this series will provide real-world examples to make learning SCSS easy and practical.

1. What is SCSS and Why Use It?

What is SCSS?

• SCSS is a CSS preprocessor, meaning it extends the capabilities of CSS by adding features like variables, functions, and logic. It helps you write maintainable, modular, and reusable stylesheets.

Why Use SCSS?

1. Variables: Store values like colors and fonts and reuse them across your stylesheet.

2. Nesting: Write CSS in a way that matches the structure of your HTML.

3. Mixins: Create reusable blocks of code.

4. Inheritance: Share styles across multiple selectors.

Setting Up SCSS

To start using SCSS, you need to set it up in your development environment. You can install SCSS using npm or yarn:

npm install -g sass

Once installed, compile your SCSS files into CSS using the following command:

sass input.scss output.css

2. Using Variables in SCSS

What Are Variables?

In CSS, you often reuse the same values like colors or font sizes. SCSS allows you to store these values in variables, making it easier to maintain and update your stylesheets.

Declaring and Using Variables

// Declaring Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Roboto', sans-serif;

// Using Variables
body {
  font-family: $font-stack;
  background-color: $primary-color;
  color: $secondary-color;
}

Output: The variables store the colors and font so that you can use them throughout your styles. If you ever need to update the color, you only need to change it in one place.

3. Nesting in SCSS

What is Nesting?

Nesting in SCSS allows you to structure your CSS selectors in a way that mirrors the structure of your HTML. It helps make the code cleaner and easier to read, especially for complex layouts.

Nesting Example

Let's say you have the following HTML structure:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

With SCSS, you can write the styles like this:

nav {
  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        &:hover {
          color: red; // Nested pseudo-class
        }
      }
    }
  }
}

Output: SCSS nesting makes your stylesheets more organized and easier to maintain, avoiding long and repetitive selectors.

4. Mixins in SCSS

What is a Mixin?

A mixin is a block of reusable code in SCSS. It allows you to create a set of styles that you can reuse throughout your stylesheet.

Creating and Using a Mixin

// Define a Mixin
@mixin border-radius($radius) {
  border-radius: $radius;
}

// Use the Mixin
.button {
  @include border-radius(10px);
}

Output: In this example, the mixin border-radius is defined with a parameter $radius. You can then include the mixin wherever you need to apply a border-radius, keeping your code DRY (Don't Repeat Yourself).

5. Inheritance with @extend

What is Inheritance?

SCSS allows you to use the @extend directive to share styles between selectors. This reduces redundancy and helps keep your stylesheet more modular.

Inheritance Example

%button-base {
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

.button-primary {
  @extend %button-base;
  background-color: #3498db;
}

.button-secondary {
  @extend %button-base;
  background-color: #2ecc71;
}

Output: Here, the %button-base placeholder stores common styles for buttons. Both .button-primary and .button-secondary extend this base and apply their own background color, reducing the need to write duplicate code.

6. Partials and Importing

What is a Partial?

Partials are small SCSS files that you can split your code into, keeping your project organized and manageable, especially in large-scale applications. A partial SCSS file starts with an underscore (e.g., _variables.scss).

Using Partials and Importing Them

For example, you could have a partial _variables.scss for storing all your variables:

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

In your main SCSS file, import the partial like this:

// style.scss
@import 'variables';

body {
  background-color: $primary-color;
}

Output: Partials help you break down your styles into manageable sections, making your stylesheets more modular and easy to maintain.

Conclusion

In this SCSS series, we covered everything from the basics like variables and nesting to more advanced features like mixins and inheritance. SCSS makes writing CSS cleaner, reusable, and scalable. By mastering SCSS, you'll be able to maintain and scale even large web projects with ease.

For beginners, SCSS is a powerful tool that can significantly improve your workflow, making CSS more maintainable and efficient.

Special Note*: This blog post was written using AI.*

বাংলায় পড়তে এখানে ক্লিক করুন

এই সিরিজের মাধ্যমে আপনি SCSS (Sassy CSS)-এর বেসিক বিষয়গুলি থেকে শুরু করে আরও কিছু শিখবেন। SCSS হলো CSS-এর একটি এক্সটেনশন যা স্টাইলশিট লেখা সহজতর, সংগঠিত, এবং ব্যবস্থাপনাযোগ্য করে তোলে। এই সিরিজ শেষে আপনি বড় প্রজেক্ট এ SCSS সহজেই ব্যবহার করতে সক্ষম হবেন।

১। SCSS শুরু করার উপায়

SCSS কী?

SCSS (Sassy CSS) হলো একটি প্রিপ্রসেসর স্ক্রিপ্টিং ভাষা যা CSS-কে আরও ক্ষমতাশালী করে এবং এতে ভেরিয়েবল, নেস্টিং, মিক্সিনস, এবং ইনহেরিটেন্সের মতো বৈশিষ্ট্য যোগ করে। SCSS-এর মাধ্যমে আপনি আরও পরিষ্কার, মডিউলার এবং ব্যবস্থাপনাযোগ্য স্টাইল লিখতে পারেন, যা সাধারণ CSS-এ সম্ভব হয় না।

SCSS কেন ব্যবহার করবেন?

CSS খুব শক্তিশালী হলেও, প্রকল্প বড় হলে সেটি পরিচালনা করা কঠিন হয়ে পড়ে। SCSS এর সীমাবদ্ধতা দূর করে নিচের সুবিধাগুলি প্রদান করে:

• ভেরিয়েবলস: SCSS-এ আপনি মানগুলি সংরক্ষণ করতে এবং পুনরায় ব্যবহার করতে পারেন, যেমন রং, ফন্ট-সাইজ এবং অন্যান্য স্টাইল।

• নেস্টিং: আপনি আপনার CSS সিলেক্টরগুলিকে HTML কাঠামোর সাথে মেলাতে পারেন, যা কোডটি সহজবোধ্য করে তোলে।

• মিক্সিনস এবং ইনহেরিটেন্স: SCSS-এ পুনর্ব্যবহারযোগ্য কোড ব্লক তৈরি করা এবং বৈশিষ্ট্য উত্তরাধিকার নেওয়া সম্ভব।

• ফাংশন এবং লজিক: SCSS-এ আপনি লজিক এবং গণনা করতে পারেন, যা রেসপন্সিভ ডিজাইন এবং জটিল লেআউট পরিচালনা করা সহজ করে তোলে।

SCSS সেটআপ করার উপায়

আপনার ডেভেলপমেন্ট পরিবেশে SCSS সেটআপ করার জন্য কিছু ধাপ অনুসরণ করতে হবে:

1. Node.js-এর মাধ্যমে SCSS ইনস্টল করা: SCSS ইনস্টল করা যায় npm বা yarn এর মাধ্যমে:

    npm install -g sass
   

   অথবা:

    yarn global add sass
   

2. SCSS-কে CSS-এ কম্পাইল করা: SCSS ইনস্টল করার পর, আপনি নিচের কমান্ড ব্যবহার করে SCSS ফাইলগুলো CSS-এ কম্পাইল করতে পারবেন:

    sass input.scss output.css
   

3. SCSS ফাইল যুক্ত করা: আপনার HTML প্রোজেক্টে SCSS ফাইল যুক্ত করতে:

    <link rel="stylesheet" href="css/style.css">
   

২।SCSS-এ ভেরিয়েবলস ব্যবহার

SCSS-এ ভেরিয়েবলসের মাধ্যমে আপনি মানগুলি সংরক্ষণ করতে পারেন যা পরবর্তীতে বিভিন্ন স্থানে পুনরায় ব্যবহার করা যায়। এটি বিশেষত বৃহৎ প্রকল্পে কনসিস্টেন্সি বজায় রাখতে এবং কোড আপডেট সহজ করতে সহায়তা করে।

ভেরিয়েবল ডিক্লারেশন এবং ব্যবহার

SCSS-এ ভেরিয়েবল $ সাইন দিয়ে ডিক্লেয়ার করা হয়:

// ভেরিয়েবল ডিক্লারেশন
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Roboto', sans-serif;

// ভেরিয়েবল ব্যবহার
body {
  font-family: $font-stack;
  background-color: $primary-color;
  color: $secondary-color;
}

গ্লোবাল এবং লোকাল ভেরিয়েবলস

ভেরিয়েবলস গ্লোবাল অথবা লোকালভাবে ব্যবহার করা যায়। গ্লোবাল ভেরিয়েবলস সব জায়গায় ব্যবহারযোগ্য আর লোকাল ভেরিয়েবলস কেবল নির্দিষ্ট ব্লকের মধ্যে ব্যবহার করা যায়।

৩। SCSS-এ নেস্টিং

SCSS-এর নেস্টিং সুবিধা CSS সিলেক্টরগুলিকে HTML কাঠামোর মতো করে গঠন করতে দেয়, যা কোডটি সহজে পড়া এবং বোঝা যায়।

নেস্টিং উদাহরণ

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

nav {
  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        &:hover {
          color: red; // নেস্টেড সুডো-ক্লাস
        }
      }
    }
  }
}

নেস্টিং মিডিয়া কুয়েরি

SCSS-এ মিডিয়া কুয়েরি নেস্টিং করে রেসপন্সিভ স্টাইলগুলি সঠিকভাবে সংগঠিত রাখা সহজ।

.button {
  background-color: #3498db;

  @media (max-width: 600px) {
    background-color: #2ecc71;
  }
}

৪। পার্টিয়ালস এবং ইম্পোর্টিং

SCSS আপনাকে আপনার কোডকে ছোট ছোট ফাইলে ভাগ করার সুযোগ দেয়, যাকে পার্টিয়াল বলে। এটি আপনাকে বড় প্রকল্পে স্টাইলগুলিকে আরও সংগঠিতভাবে ব্যবস্থাপনা করতে সহায়তা করে।

পার্টিয়াল তৈরি করা

SCSS ফাইলের নামের আগে _ ব্যবহার করলে তা পার্টিয়াল হয়ে যায়। যেমন:

• _variables.scss

• _mixins.scss

@import ব্যবহার করে পার্টিয়াল ইম্পোর্ট করা

@import 'variables';
@import 'mixins';
@import 'header';

৫।মিক্সিং (mixin)

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

@mixin border-radius($radius) {
  border-radius: $radius;
}

.button {
  @include border-radius(10px);
}

৩। এক্সটেন্ড/ইনহেরিটেন্স

@extend নির্দেশ ব্যবহার করে আপনি বিভিন্ন সিলেক্টরের মধ্যে স্টাইল শেয়ার করতে পারেন।

%button-base {
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

.button-primary {
  @extend %button-base;
  background-color: #3498db;
}

উপসংহার

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

Unlock the power of SCSS to write cleaner, organized, and scalable CSS. This guide covers everything from setting up SCSS to using its advanced features like variables, nesting, mixins, inheritance, partials, and more. Whether you're a beginner or looking to refine your skills, this series offers practical examples and tips to enhance your styling workflow. Start mastering SCSS today to make your CSS more maintainable and efficient. Read on to learn how SCSS can transform your web development process.

বিশেষ দ্রষ্টব্য: এই ব্লগ টি AI ব্যবহার করে লেখা হয়েছে।

1. "Follow Your Passion, and Success Will Come"
Why it's harmful: While passion is important, it isn’t always enough to build a successful career. Sometimes, turning a passion into a job can drain the joy out of it. Focus on building skills and aligning them with market demand.

2. "Never Say No to an Opportunity"
Why it's harmful: Saying yes to everything can lead to burnout, overwhelm, and spreading yourself too thin. It’s essential to set boundaries and prioritize opportunities that align with your goals.

3. "Stay Loyal to One Company for a Lifetime"
Why it's harmful: The days of staying with one company for life are gone. Sticking to one company might limit your growth, opportunities, and salary potential. It’s okay to seek new challenges when you outgrow a role.

4. "Climbing the Corporate Ladder is the Only Path to Success"
Why it's harmful: Success doesn’t always mean rising to the top. Many people find fulfillment in lateral career moves, entrepreneurship, or even freelancing. Define success in your own terms.

5. "Work Hard, and You’ll Be Rewarded"
Why it's harmful: Hard work alone doesn’t guarantee success. Networking, visibility, and strategic decision-making are just as important. Sometimes, people who work less but network effectively achieve more recognition.

6. "Keep Your Head Down and Avoid Office Politics"
Why it's harmful: Office politics can be uncomfortable, but completely ignoring them may harm your career. Understanding the dynamics of workplace relationships and managing them effectively is crucial for career growth.

7. "Stick to Your Career Plan No Matter What"
Why it's harmful: Sticking rigidly to a plan can close doors to unexpected opportunities. The job market evolves, and so do you. Be flexible and open to change as your career progresses.

❌ জব হপিং আপনার ক্যারিয়ারকে মেরে ফেলবে
↳ কৌশলগত চাকরি হপিং আপনার ক্যারিয়ারকে ত্বরান্বিত করতে পারে। যদি একটি চাকরি আর আপনাকে সেবা না দেয়, তবে এগিয়ে যান। এবং আপনি যখন করবেন তখন আপনার বেতন বৃদ্ধি করুন।

❌ কঠোর পরিশ্রম করুন এবং প্রচার আসবে
↳ আপনার কৃতিত্ব সম্পর্কে চিৎকার করতে হবে এবং নিজের পক্ষে সমর্থন করতে হবে।

❌ আপনার একটি 5 বছরের ক্যারিয়ার প্ল্যান দরকার
↳ একটি কঠোর পরিকল্পনা করা প্রায় অসম্ভব - মানিয়ে নিতে হবে এবং দক্ষতা-স্ট্যাকিংয়ের উপর ফোকাস করুন।

❌ বেতন নিয়ে আলোচনা করলে আপনি অফারটি হারাবেন
↳ আলোচনা না করে আপনি টেবিলে টাকা রেখে যাচ্ছেন। বেতন নিয়ে গবেষণা করুন এবং অফার পেলে জিজ্ঞাসা করুন।

❌ শুধুমাত্র সেই চাকরিতে আবেদন করুন যার জন্য আপনি 100% যোগ্য৷
↳ যখন আপনি কাজের বিবরণের 60% থেকে 80% হিট করেন তখন আবেদন করুন। আপনার বৃদ্ধির জন্য জায়গা থাকবে।

❌ আপনি এটি তৈরি না হওয়া পর্যন্ত এটি জাল করুন
↳ জিনিসগুলি জানার ভান করবেন না - একটি শিক্ষানবিস মানসিকতা অবলম্বন করুন এবং আপনার দক্ষতার ফাঁকগুলি প্লাগ করুন৷

❌ কর্পোরেট সিঁড়ি আরোহণ
↳ সাইড-ওয়ে চলাফেরা করা বা একজন বিশেষজ্ঞ হয়ে উঠা ঠিক উপরের দিকে আরোহণের মতোই ফলপ্রসূ হতে পারে।

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

এখন আমরা reactjs এর state কে মোডিফাই করা শিখবো।

অনেক সময় আমরা স্টেস্ট বর্তমান ভ্যালু পরিবর্তন করা লাগতে পারে। তখন আমরা নিচের মতো করে ভ্যালু পরিবর্তন করে থাকি।

const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  const handleDecrement = () => {
    setCount(count - 1);
  }

এখানে সেট ফাংশনের ভ্যালু পরিবর্তন করা হয়েছে count এর বর্তমান ভ্যালু'র সাথে ১ ইনক্রিমেন্ট বা ডিক্রিমেন্ট করে। কিন্তু এখানে আমরা একই component এ ইনক্রিমেন্ট এবং ডিক্রিমেন্ট করা হয়েছে সেই জন্য আমাদের তেমন একটা সমস্যা দেখছি না। কিন্তু আমরা যখন প্যারেন্ট কম্পনেন্ট এ state ডিক্লিয়ার করে props পাস করে আমরা ডাটা ব্যবহার করি।

কিন্তু বিপত্তি হয় যখন Boolean, Count, Filter, Find ইত্যাদি ধরনের ডাটা নিয়ে কাজ করি। অনেক সময় এমনও হতে পারে যে আমাদের বর্তমান ডাটা update করা লাগছে। কিন্তু আমাদের variable এবং setState ফাংশন ভিন্ন component আছে। এখন যদি উপরের নিয়মে ডাটা পরিবর্তন করতে চাই তাহলে count, setState কে props আকারে পাস করতে হবে। যা খুবই ঝামেলা যুক্ত হতে পারে।

কিন্তু যদি চাই যে শুধু মাত্র কোনো একটা ইভেন্ট ঘটলে setState এর মাধ্যমে count এর ডাটা পরিবর্তন হবে তাহলে কেমন হবে? নিশ্চয় অনেক ভালো হবে। তাহলে চলুন কিভাবে setState ফাংশন কে মোডিফাই করে আমরা সেই state এর ভেরিয়েবল এর ডাটা পরিবর্তন করতে পারি।

const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevData) => prevData + 1);
  }

  const handleDecrement = () => {
    setCount((prevData) => prevData - 1);
  }

উপরে দেখানো হয়েছে কিভাবে আমরা শুধু মাত্র setState ফাংশন কে মোডিফাই করতে পারি। উপরে যদিও রিটার্ন কে শর্টকার্ট করে ব্যবহার করা হয়েছে es6 এর অ্যারো ফাংশন ব্যবহার করে।

চাইলে নিচের মতো করে লেখা যাবে--

const [count, setCount] = useState(0);

const handleIncrement = () => {
    setCount((prevData) => {
        return prevData + 1
    });
  }

  const handleDecrement = () => {
    setCount((prevData) => {
        return prevData - 1
    });
  }

বিস্তারিত আসা যাক- প্রথমে setState ফাংশন এর ভিতর একটা callback ফাংশন নিয়েছি। callback ফাংশন একটা প্যারামিটার রিসিভ করে যার ভিতরে state এর বর্তমান data থাকে এবং আমরা সেই ডাটাকে যে ভাবে ইচ্ছা মোডিফাই করে আবার রিটার্ন করে দিলেই state আপডেট হয়ে যায়।

নিচে আরও কিছু উদাহরণ দেখবো--

ধরুন, একটা state এ ১ থেকে ২০ পর্যন্ত নাম্বারের অ্যারে আছে যেখানে আমরা prime number, odd number, even number বের করবো।

প্রথমে একটা স্টেট এ ইনিশিয়াল ভাবে ১ থেকে ২০ পর্যন্ত নাম্বার নিবো।

 const [count, setCount] = useState([1,2,3,4,5,6,7,8,9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);

console.log(count) //[1,2,3,4,5,6,7,8,9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

এখন আমরা setState ফাংশন মোডিফাই করে শুধু মাত্র prime number বের করবো।

const primeNumber = () => {
    setCount((prevData) => {
        const primeNumbers = prevData.filter((number) => {
            for (let i = 2; i < number; i++) {
                if (number % i === 0) {
                    return false;
                }
            }
            return number > 1;
        });
        return primeNumbers;
    });
  }

// Output
console.log(count) // [2, 3, 5, 7, 11, 13, 17, 19]

setState ফাংশন মোডিফাই করে এখন odd number বের করবো।

const oddNumber = () => {
    setCount((prevData) => {
        const oddNumbers = prevData.filter((number) => number % 2 !== 0);
        return oddNumbers;
    });
  }

//--Output
console.log(count) // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

setState ফাংশন মোডিফাই করে এখন even number বের করবো।

const evenNumber = () => {
    setCount((prevData) => {
        const evenNumbers = prevData.filter((number) => number % 2 === 0);
        return evenNumbers;
    });
  }
//--Output
console.log(count) // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

এই রকম ভাবে আরও অনেক কাজ করতে পারবো স্টেট মোডিফাই করার মাধ্যমে।

ধন্যবাদ।

প্রথমেই জেনে নেওয়া যাক ভেরিয়েবল কি? এবং এর কাজ কি?

ভেরিয়েবল হলো একটা জারের(কৌটা) মতো যেখানে আমরা ইচ্ছা মতো number, staring, text, object, function ইত্যাদি রাখতে পারবো। ধরুন, আমার কাছে একটা জার(কৌটা) আছে তার ভিতর কিছু আপেল, কমলালেবু, ডালিম আছে। এরপর আমার যখন খেতে মন চাইবে তখন আমার ইচ্ছা মতো ফল খেতে পারবো। ঠিক একইভাবে প্রোগ্রামিং লেখার সময় আমরা ভেরিয়েবল এর ভিতর আমাদের প্রয়োজনীয় Data রাখতে পারবো এবং পরবর্তিতে আবার আমাদের প্রয়োজন মতো ব্যবহার করতে পারবো। কিন্তু সে গুলো প্রোগ্রামিং এর রুলসের মেনেই লিখতে হবে। আর আমার যখন যেখানে, যতবার দরকার সেখানেই ভ্যারিয়েবল ডেকেই আমি তার ভ্যালু পেয়ে যাবো।

তবে ভ্যারিয়েবল নেওয়ার আগে সেটাকে অবশ্যই প্রথম বার ডিক্লেয়ার করে নিতে হবে। জাভাস্ক্রিপ্ট এ ভ্যারিয়েবল ডিক্লেয়ার করা হয় var , let , const কীওয়ার্ড দিয়ে। যে টাইপের ভ্যারিয়েবলই হউক সেটা var দিয়েই ডিক্লেয়ার করা হয়। var লিখার পর আপনি ভ্যারিয়েবলের নাম দিবেন, কি নামে হবে ভ্যারিয়েবল সেটা। এই নাম যেকোনো কিছু ইউজ করতে পারবেন।

তবে কিছু রুলস আছে এখানেঃ

1. জাভাস্ক্রিপ্ট এর রিসার্ভড কীওয়ার্ড ইউজ করতে পারবেন না।
2. ভ্যারিয়েবলের নাম অক্ষর দিয়ে শুরু হতে হবে, তবে নাম্বার, স্পেশাল ক্যারেক্টার !, @, #, %, ^, &, *, (, ) দিয়ে শুরু হতে পারবে না। কিন্তু _(আন্ডারস্কোর) ও $(ডলার সাইন) ইউজ করে শুরু করতে পারবেন।
3. জাভাস্ক্রিপ্ট এ ভ্যারিয়েবল এর নাম কেস-সেনসিটিভ। মানে myName এবং Myname বা myname এক না। যেখানে ঠিক বড় হাতে ছোটো হাতে যেভাবে ভ্যারিয়েবলের নাম ঘোষনা করবো সেটাকে অ্যাক্সেস করতে হলে ঠিক সেভাবেই লিখে অ্যাক্সেস করতে হবে। এখানে myName এবং Myname দুইটা সম্পূর্ন আলাদা আলাদা দুইটা ভ্যারিয়েবল।
4. ভেরিয়েবল এর ঘোষনা করার সময় নামের মাঝে ফাঁকা(space) থাকা যাবে না।
5. ভেরিয়েবল এর নাম সংখ্যা দিয়ে শুরু হতে পারবে না।

যেমনঃ

var myVar = "Hello world!"; // Hello world!
var myVar1 = 1234; // 1234

let mySchool = "Dhaka College." // Dhaka College.
let myIdNumber = 12345678; // 12345678

const facebookAuthor  = "Mark Zuckerberg"; // Mark Zuckerberg
const piValue = 3.14159; // 3.14159

এবার এখানে প্রশ্ন আসতে এখানে ভেরিয়েবল ঘোষনা দেওয়ার সময় শুধুমাত্র var কিওয়ার্ড ব্যবহার না করে var , let , const এই কিওয়ার্ড গুলো কেনো ব্যবহার করা হয়েছে??

তাহলে চলুন এবার বিস্তারিত জেনে নেওয়া যাক-

var , let , constকেনো ব্যবহার হয়েছে জানতে হলে প্রথমে জানতে হবে socpe কী?

স্কোপ কোডের বিভিন্ন অংশ থেকে ভেরিয়েবল, অবজেক্ট এবং ফাংশনগুলির অ্যাক্সেস যোগ্যতা নির্ধারণ করে।

জাভাস্ক্রিপ্টে ৩ ধরণের স্কোপ(Scope) রয়েছে:

1. ফাংশন (লোকাল )
2. গ্লোবাল স্কোপ (Scope)
3. ব্লক স্কোপ (Scope)

var কিওয়ার্ড ফাংশন এবং গ্লোবাল স্কোপ সাপোর্ট করে কিন্তু ব্লক স্কোপ সাপোর্ট করে না।

ফাংশন(লোকাল) স্কোপ-

যখন কোনও ফাংশনের অভ্যন্তরে কোনও ভেরিয়েবল সংজ্ঞায়িত করা হয় , এটি কেবলমাত্র সেই ফাংশনের জন্য লোকাল হবে এবং বাইরে ব্যবহার করা যাবে না।

function local(){ 
  var number = 1; 
  console.log(number); // 1 gets printed 
} 
console.log(number); // undefined

গ্লোবাল স্কোপ

যখন কোনও ফাংশনের বাইরে কোনও ভেরিয়েবল ঘোষণা করা হয় বা var কীওয়ার্ড ছাড়াই তখন তা গ্লোবাল হয়ে যাবে এবং যে কোনও জায়গা থেকে অ্যাক্সেসযোগ্য হবে।

var number = 1; 
function local() { 
   console.log(number); // 1 gets printed 
} 
console.log(number); // 1 gets printed

ব্লক স্কোপ

curly braces { }, if-else cases এবং for loops হলো block-scoped

### ভুল নিয়ম-
if(true){
   let letVariable = "This is let Variable";
}
console.log(letVariable) // Uncaught ReferenceError: letVariable is not defined

### সঠিক নিয়ম-
if(true){
   let letVariable = "This is let Variable";
   console.log(letVariable) // This is let Variable
}

var

1. একবার ডিক্লেয়ার করলে পুনরায় আবার একই নামে ডিক্লেয়ার করা যায়।
2. বারবার ভেলু পরিবর্তন করা যায়।
3. একই নামে ভেরিয়েবল ডিক্লেয়ার করা যাবে কিন্তু সবার নিচে যে ভেরিয়েবল থাকবে ঐটা প্রিন্ট হবে।

var number = 1; // first declaration 
var number = 2; // same variable redeclared with the same name console.log(number); // And we see no errors
console.log(number) // 2

let

এটা ব্লক স্কোপ ও একবার ডিক্লেয়ার করলে পুনরায় ডিক্লেয়ার করা যায় না। এর মান পরিবর্তন করা যায়।

const

এই কিওয়ার্ড ব্যবহার করা হয় যখন আমরা কোনো কিছুর মান নির্দিষ্ট করে রাখার জন্য। var , let থেকে কিছুটা আলাদা কারণ এর ভ্যালু পরিবর্তন করা যায় না। শুধু মাত্র একবার ডিক্লেয়ার করা যায়।