Sass @mixin ও @include

Sass Mixin

@mixin সুইচটি সমগ্র ওয়েবসাইটে পুনরায় ব্যবহার করা যায়নায় CSS কোড তৈরি করতে আপনাকে সহায়তা করে।

নির্মাণ @include সুইচটি আপনাকে (উল্লেখ) mixin ব্যবহার করতে দেয়।

Mixin নির্মাণ

mixin হলো যা দ্বারা @mixin সুইচটি নির্দিষ্ট করেছেন。

Sass @mixin য়ান্ত্রিকায়ায়সুরু করুন:

@mixin name {
  property: value;
  property: value;
  ...
}

উদাহরণে, "important-text" নামের mixin তৈরি করা হয়:

SCSS সিন্তাক্স:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

সুঝাওয়া:

Sass-তে হাইপহেন এবং হাইফেন একই হিসাবে মনে করা হয়。

আর্থেক্ষেত্রে, @mixin important-text { } এবং @mixin important_text { } একই mixin-এর অংশ হিসাবে মনে করা হয়!

Mixin-এর ব্যবহার

@include ইনসার্ট করা হয়েছে যাতে mixin-কে উল্লেখ করা যায়。

Sass @include mixin সংজ্ঞায়ন

selector {
  @include mixin-name;
}

তাই, উপরোক্ত important-text mixin-কে অন্তর্ভুক্ত করতে হলে:

SCSS সিন্তাক্স:

.danger {
  @include important-text;
  background-color: green;
}

Sass ট্রান্সলেটার উপরোক্ত কোডটিকে সাধারণ CSS-এ রূপান্তর করবে:

CSS আউটপুট:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

Mixin-এও অন্যান্য mixin-কে সমাহৃত করা যেতে পারে:

SCSS সিন্তাক্স:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

বদলকে Mixin-কে পাঠানো

Mixins পারামিটারগুলি গ্রহণ করে। এইভাবে, আপনি mixin-কে বদল পাঠাতে পারেন。

পারামিটারসহ mixin নির্ধারণ করার পদ্ধতি নিম্নরূপ:

SCSS সিন্তাক্স:

/* দুই পারামিটারের mixin নির্ধারণ */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // দুই মানের mixin কে বাস্তবায়িত করা
}
.myNotes {
  @include bordered(red, 2px); // দুই মানের mixin কে বাস্তবায়িত করা
}

মনে রাখুন যে, পারামিটারগুলি বদল হিসাবে সেট করা হয়েছে এবং তা ব্যবহার করে বর্তুল এবং প্রশস্ততা প্রতিশব্দকে মানা করা হয় (রঙ এবং প্রশস্ততা)。

কম্পাইল করার পর, CSS এমনভাবে হবে:

CSS আউটপুট:

.myArticle {
  border: 1px solid blue;
}
.myNotes {
  border: 2px solid red;
}

Mixin এর ডিফল্ট মান

মিক্সিন বদলগুলির জন্য ডিফল্ট মান নির্ধারণ করা যেতে পারে:

SCSS সিন্তাক্স:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

তারপর, আপনাকে শুধুমাত্র মিক্সিন উল্লেখ করতে হবে যে কি বদল করতে হবে:

SCSS সিন্তাক্স:

.myTips {
  @include bordered($color: orange);
}

Mixin-কে সরবরাহকারীর প্রতিকূলতা হিসাবে ব্যবহার করা

Mixin-এর আরেকটি ভালো ব্যবহার হল (ব্রাউজার) সরবরাহকারীর প্রতিকূলতা।

এটি একটি রূপান্তরের একটি উদাহরণ:

SCSS সিন্তাক্স:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.myBox {
  @include transform(rotate(20deg));
}

কম্পাইল করা পরে, CSS এমনভাবে দেখা যাবে:

CSS সিন্তাক্স:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}