Sass ভেক্টর

Sass ভেক্টর

পরিবর্তনী একটি তথ্য স্টোরেজের পদ্ধতি, যা আপনি পরবর্তীতে পুনরায় ব্যবহার করতে পারেন。

Sass-এর মাধ্যমে, আপনিতথ্যপরিবর্তনীতে স্টোরেজ করা হয়, যেমন:

• শব্দ
• সংখ্যা
• রঙ
• বুল মান
• তালিকা
• null

Sass $ সংকেত ব্যবহার করে পরিবর্তনীর নাম দিয়ে পরিবর্তনী ঘোষণা করে:

Sass পরিবর্তনী সংজ্ঞায়ন:

$variablename: value;

নিচের উদাহরণটিতে 4টি পরিবর্তনী ঘোষণা করা হয়েছে:

• myFont
• myColor
• myFontSize
• myWidth

পরিবর্তনী ঘোষণা করার পর, আপনি যে কোনও স্থানে এই পরিবর্তনীগুলি ব্যবহার করতে পারবেন:

SCSS গ্রামার:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

তাই, Sass ফাইল পরিবর্তনীকৃত হলে, তা পরিবর্তনী (myFont, myColor ইত্যাদি) ব্যবহার করবে এবং নিচেররকম সাধারণ CSS এবং CSS-তে পরিবর্তনীর মান প্রদর্শন করবে:

CSS আউটপুট:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
#container {
  width: 680px;
}

Sass পরিবর্তনী পরিসর

Sass পরিবর্তনী শুধুমাত্র তাদের নির্দিষ্ট স্তরে উপলব্ধ

দেখুন নিচের উদাহরণটি:

SCSS গ্রামার:

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> ট্যাগের মধ্যে লেখার রঙ হবে লাল বা সবুজ? লাল!

আরেকটি নির্ধারণ, $myColor: green; এখানে নির্ধারণ করা হয়েছে <h1> একটি প্রযুক্তির মধ্যে, এবং কেবল সেখানেই উপলব্ধ!

তাই, CSS আউটপুট হবে:

CSS আউটপুট:

h1 {
  color: green;
}
p {
  color: red;
}

ভালো, এটা ভেক্টর স্কোপসির প্রবণতা

Sass !global

ব্যবহার করা যেতে পারে !global সূচক ভেক্টর স্কোপসির প্রবণতা সমাপ্ত করে

!global সূচক সার্বজনীন বলে নির্ধারণ করা হয়, যার মানে এটা সকল স্তরে পরিবেশিত হতে পারে。

দেখুন নিচের উদাহরণ (উপরের সমম্যাত, কিন্তু !global）：

SCSS গ্রামার:

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

এখন <p> ট্যাগের মধ্যে লেখার রঙ হবে সবুজ!

তাই, CSS আউটপুট হবে:

CSS আউটপুট:

h1 {
  color: green;
}
p {
  color: green;
}

সুঝাওয়া:সবকটি প্রযুক্তির সময় সার্বজনীন ভেক্টর নির্ধারণ করা উচিত। স্মার্ট পদ্ধতি হল সকল সার্বজনীন ভেক্টরকে তাদের নিজস্ব ফাইলে নির্ধারণ করা, যা "_globals.scss" নামে নামকরণ করা হয়, এবং @include কীভাবে ফাইলটির মধ্যে কীভাবে শব্দসাংখ্যক বাক্যভাষা