Sass @import এবং Partials

Sass CSS কোডকে অসুবিধা রক্ষা করতে পারে (DRYDRY, Don't Repeat Yourself)

DRY (Don't Repeat Yourself) কোড লিখতে একটি পদ্ধতি হল সংশ্লিষ্ট কোডকে একটি পৃথক ফাইলে সংরক্ষণ করা।

আপনি CSS স্প্লিটকৃতি ব্যবহার করে ছোট ফাইল তৈরি করতে পারেন এবং অন্য সাস ফাইলে এগুলোকে যুক্ত করতে পারেন।উদাহরণস্বরূপ, এইগুলো হতে পারে: রিসেট, বৈশিষ্ট্য, রঙ, ফন্ট ইত্যাদি。

Sass ফাইল আমদানিকরণ

ভালোভাবে, Sassও CSS মতো সমর্থন করে, @import ইনস্ট্রাকশন。

@import ইনস্ট্রাকশনটি একটি ফাইলের অন্তর্ভুক্ত কনটেন্টকে আরেকটি ফাইলে যুক্ত করতে অনুমতি দেয়。

কার্যকারিতা সমস্যার কারণে, CSS @import ইনস্ট্রাকশনটির একটি প্রধান দুর্বলতা; প্রত্যেকবার এটি কল করার সময় একটি অতিরিক্ত HTTP রিকোর্ড তৈরি করবে।কিন্তু, Sass @import ইনস্ট্রাকশন ফাইলকে CSS-এ যুক্ত করবে; তাই, চালুতে অতিরিক্ত HTTP কল প্রয়োজন না!

Sass আমদানিকরণ বিন্যাস:

@import filename;

টিপস:আপনাকে ফাইল সম্প্রসারণ উল্লেখ করতে হবে না, Sass স্বয়ংক্রিয়ভাবে .sass বা .scss ফাইল হিসাবে মনে করবে।আপনিও CSS ফাইল আমদানিকরণ করতে পারেন。@import ইনস্ট্রাকশন ফাইল আমদানিকরণ করুন, তারপর প্রধান ফাইলে আমদানিকরণকৃত ফাইলের যে কোনও বৈশিষ্ট্য বা mixin ব্যবহার করতে পারেন。

আপনি প্রধান ফাইলে কোনও সংখ্যক ফাইল আমদানিকরণ করতে পারেন:

ইনস্ট্রাকশন

@import "variables";
@import "colors";
@import "reset";

আমরা একটি উদাহরণ দেখতে চাই: আমরা একটি "reset.scss" ফাইল আছে, যা এমনভাবে দেখাবে:

SCSS বিন্যাস (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

এখন আমরা "reset.scss" ফাইলকে আরেকটি নামকরণ "standard.scss" ফাইলে আমদানিকরণ করতে চাই。

আমরা এইভাবে করি: সাধারণত, ফাইলের শীর্ষে যোগ করা হয় @import ইনস্ট্রাকশন; এর মধ্যকার কনটেন্ট সার্বজনীন ক্ষেত্রে কার্যকর হবে:

SCSS বিন্যাস (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

তাই, "standard.css" ফাইল পরিবর্তন করা হলে, CSS এমনভাবে দেখাবে:

CSS আউটপুট：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (স্থায়ী ফাইল)

ডিফল্ট সম্পর্কে, Sass সরাসরি সকল .scss ফাইলকে পরিবর্তন করে।কিন্তু, ফাইল আমদানিকরণের সময়, আপনাকে ফাইলকে সরাসরি পরিবর্তন করতে হবে না。

Sass-এর একটি ব্যবস্থা রয়েছে: আপনি যদি ফাইলের নাম হাইফেন দ্বারা শুরু করেন, Sass তা রূপান্তরিত করবে না।এইভাবে নামকরণকৃত ফাইলটি Sass-এবং partials হিসাবে পরিচিত।

তাই, partial Sass ফাইলটির নাম সম্মানিত হাইফেন দ্বারা শুরু করা হয়:

Sass Partial সিন্ট্যাক্স:

_filename;

এই উদাহরণটি "_colors.scss" নামের partial Sass ফাইলটি দেখায়。（এই ফাইল প্রত্যক্ষভাবে "colors.css" হিসাবে রূপান্তরিত হবে না）：

ইনস্ট্রাকশন

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

এখন, আপনি যদি এই partial ফাইল ইমপোর্ট করেন, তবে হাইফেন উচ্ছেদ ছাড়া করুন।Sass-এর বোঝাপড়া হল এটি ফাইল "_colors.scss" ইমপোর্ট করা উচিত:

ইনস্ট্রাকশন

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}