স্যাসে `!global` ফ্ল্যাগ
এই প্রবন্ধে SASS-এ !global পতাকা ব্যাখ্যা করা হয়েছে।
!global পতাকার বিস্তারিত কার্যপ্রণালী, ব্যবহারিক উদাহরণ এবং সতর্কতা আমরা ব্যাখ্যা করব।
YouTube Video
স্যাসে !global ফ্ল্যাগ
স্যাসে, !global ফ্ল্যাগ ভ্যারিয়েবলের স্কোপ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এই ফ্ল্যাগটি সঠিকভাবে বুঝে এবং সঠিকভাবে ব্যবহার করে আপনি কোডের অপ্রত্যাশিত আচরণ এড়াতে পারবেন ও রক্ষণাবেক্ষণযোগ্যতা বাড়াতে পারবেন।
!global ফ্ল্যাগ কী?
সাধারণত স্যাস ভ্যারিয়েবলের একটি স্কোপ বা সীমা থাকে। ডিফল্টভাবে, ভ্যারিয়েবল শুধুমাত্র যেখানে সংজ্ঞায়িত করা হয়েছে সেই স্কোপেই বৈধ। অন্যভাবে বললে, যদি ভ্যারিয়েবল কোন ফাংশন বা মিক্সিন-এর ভিতরে সংজ্ঞায়িত থাকে, তবে তা বাইরে থেকে ব্যবহৃত হবে না।
তবে !global ফ্ল্যাগ ব্যবহার করে ভ্যারিয়েবলকে সরাসরি গ্লোবাল স্কোপে নির্ধারণ করা যায়। এভাবে ভ্যারিয়েবল স্কোপসমূহের মধ্যে ভাগাভাগি করা যায়।
!global ফ্ল্যাগ ছাড়াই
1$color: red; // Global Variable
2
3@mixin change-color() {
4 $color: blue; // Local variable (does not overwrite the global variable)
5}
6
7.change {
8 @include change-color();
9 color: $color; // red
10}- এই কোডে,
$colorগ্লোবাল স্কোপে সংজ্ঞায়িত, তাই.changeএরcolorপ্রপার্টিredথেকে যাবে।
আউটপুট CSS
1.change {
2 color: red;
3}!global ফ্ল্যাগ সহ
চলুন, একই উদাহরণে !global ফ্ল্যাগটি যোগ করি।
1$color: red; // Global Variable
2
3@mixin change-color() {
4 $color: blue !global; // Overwrite the global variable
5}
6
7.change {
8 @include change-color();
9 color: $color; // blue
10}- এক্ষেত্রে,
!globalফ্ল্যাগ ব্যবহারের ফলে$color-এর মান গ্লোবাল স্কোপে আপডেট হয়। ফলে,.change-এরcolorপ্রপার্টিblueহয়ে যায়।
আউটপুট CSS
1.change {
2 color: blue;
3}ব্যবহারের সতর্কতাসমূহ
-
গ্লোবাল স্কোপ দূষণ
!globalফ্ল্যাগের অতিরিক্ত ব্যবহার অপ্রত্যাশিত স্কোপ সংঘাত এবং গ্লোবাল স্কোপ দূষণের কারণ হতে পারে। এটি বড় প্রকল্পগুলিতে বিশেষভাবে গুরুত্বপূর্ণ, যেখানে এই ফ্ল্যাগটির অতিরিক্ত ব্যবহার এড়ানো উচিত। -
অনিচ্ছাকৃত মান ওভাররাইট
!globalফ্ল্যাগ ব্যবহার করার সময়, একই নামের ভেরিয়েবলগুলো অন্য কোথাও অনিচ্ছাকৃতভাবে ওভাররাইট হতে পারে। তাই ভেরিয়েবলগুলোর জন্য ধারাবাহিক এবং স্পষ্ট নামকরণ প্রয়োজনীয়।
ব্যবহারিক উদাহরণ
নিম্নে !global ফ্ল্যাগ সঠিকভাবে ব্যবহারের একটি উদাহরণ দেওয়া হলো।
1$primary-color: #3498db;
2$secondary-color: #2ecc71;
3
4@mixin set-theme($primary, $secondary) {
5 $primary-color: $primary !global;
6 $secondary-color: $secondary !global;
7}
8
9.light-theme {
10 @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14 @include set-theme(#333333, #666666);
15}
16
17body {
18 background-color: $primary-color;
19 color: $secondary-color;
20}- এই কোডে,
set-themeমিক্সইনটি থিমগুলি ডায়নামিকভাবে পরিবর্তনের জন্য ব্যবহার করা যেতে পারে। প্রতিটি থিমের জন্য গ্লোবাল ভেরিয়েবল আপডেট হওয়ায়, একাধিক থিম নমনীয়ভাবে পরিচালনা করা যায়।
আউটপুট CSS
1body {
2 background-color: #333333;
3 color: #666666;
4}সাধারণ ভুল এবং তাদের প্রতিকার
ফ্ল্যাগটি ভুলে যাওয়া
আপনি যদি !global যোগ করতে ভুলে যান, তবে ভেরিয়েবলগুলো কাঙ্ক্ষিত স্কোপে আপডেট নাও হতে পারে। প্রয়োজন অনুযায়ী অবশ্যই স্পষ্টভাবে ফ্ল্যাগটি যোগ করুন।
1@mixin update-color() {
2 $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6 $color: green !global; // Overwrite the global variable
7}গ্লোবাল স্কোপের উপর অতিরিক্ত নির্ভরশীলতা
!global ফ্ল্যাগের উপর অতিরিক্ত নির্ভরতা কোড ডিবাগিং ও রক্ষণাবেক্ষণকে কঠিন করে তোলে। এর ব্যবহার ন্যূনতম রাখা উচিত।
সারসংক্ষেপ
SASS-এ !global ফ্ল্যাগ নির্দিষ্ট পরিস্থিতিতে খুবই উপকারী, তবে এটি সতর্কতার সাথে ব্যবহার করা উচিত। ভেরিয়েবলের স্কোপ স্পষ্টভাবে বুঝে এবং গ্লোবাল স্কোপ সঠিকভাবে পরিচালনা করে, আপনি সহজেই রক্ষণাবেক্ষণযোগ্য SASS কোড লিখতে পারবেন।
নিম্নলিখিত মূল বিষয়গুলো মনে রাখা উচিত:।
-
ভেরিয়েবলগুলি ডিফল্টভাবে তাদের স্কোপের উপর নির্ভরশীল।
-
!globalফ্ল্যাগ আপনাকে গ্লোবাল স্কোপে ভেরিয়েবল আপডেট করার অনুমতি দেয়। -
ফ্ল্যাগের ব্যবহার ন্যূনতম রাখুন এবং যেখানে সম্ভব অনিচ্ছাকৃত ওভাররাইট এড়িয়ে চলুন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।