Sass এর সিনট্যাক্স এবং ব্যবহার

সাস (Sass) কি?

Sass (Syntactically Awesome Stylesheets) একটি CSS প্রিপ্রোসেসর, যা CSS-এর লেখার প্রক্রিয়াকে আরও সহজ, কার্যকর এবং শক্তিশালী করে তোলে। এটি CSS-কে আরও উন্নত ও শক্তিশালী ফিচার প্রদান করে, যেমন ভেরিয়েবল, নেস্টিং, মিক্সিন, ইনহেরিট্যান্স, ইত্যাদি। Sass এর মাধ্যমে আপনি কাস্টম স্টাইল শীট সহজে লিখতে এবং মেইনটেন করতে পারেন।

Sass CSS এর একটি সরল, উন্নত সংস্করণ যা বড় প্রকল্পে কাজ করার সময় কোডের পুনঃব্যবহারযোগ্যতা এবং রিডেবিলিটি বৃদ্ধি করে। Sass একটি প্রিপ্রোসেসর হিসেবে কাজ করে, যার মাধ্যমে আপনি Sass ফাইল লিখে তা CSS এ কম্পাইল করতে পারেন।

Sass এর সিনট্যাক্স এবং ব্যবহার

Sass দুইটি ভিন্ন সিনট্যাক্স সমর্থন করে:

1. SCSS (Sassy CSS): এটি CSS এর মতোই সিঙ্কট্যাক্স অনুসরণ করে, তবে এতে অতিরিক্ত ফিচার যেমন ভেরিয়েবল, মিক্সিন ইত্যাদি রয়েছে। SCSS এ সেমিকোলন এবং ব্রেস ({}) ব্যবহার করা হয়।
2. Sass: এটি একটি ইনডেন্টেড সিনট্যাক্স, যেখানে সেমিকোলন বা ব্রেস ব্যবহার করা হয় না। ইনডেন্টেশন দ্বারা কোড ব্লক নির্ধারিত হয়।

এখানে SCSS এর সিনট্যাক্সকে বেশি প্রাধান্য দেওয়া হয় কারণ এটি CSS এর মতোই এবং ওয়েব ডেভেলপারদের জন্য বেশি পরিচিত।

SCSS সিনট্যাক্স এবং উদাহরণ

১. ভেরিয়েবল (Variables)

Sass এর মাধ্যমে আপনি CSS প্রপার্টির মানগুলোকে ভেরিয়েবল হিসেবে সংরক্ষণ করতে পারেন, যাতে কোড পুনঃব্যবহারযোগ্য হয় এবং সহজে পরিবর্তন করা যায়।

$primary-color: #3498db; // ভেরিয়েবল তৈরি করা

body {
  color: $primary-color; // ভেরিয়েবল ব্যবহার করা
}

এখানে, $primary-color নামক একটি ভেরিয়েবল তৈরি করা হয়েছে এবং তা body সিলেক্টরে ব্যবহার করা হয়েছে।

২. নেস্টিং (Nesting)

Sass এর মাধ্যমে আপনি CSS সিলেক্টরগুলিকে আরও স্বাভাবিক এবং পঠনযোগ্যভাবে নেস্ট (nest) করতে পারেন।

nav {
  ul {
    list-style-type: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}

এখানে, nav, ul, li, এবং a সিলেক্টরগুলো একটি নির্দিষ্ট কাঠামোয় নেস্ট করা হয়েছে। এটি কোডকে আরও পরিষ্কার এবং সহজে মেইনটেনযোগ্য করে তোলে।

৩. মিক্সিন (Mixins)

Mixins হল একধরনের কোড ব্লক যা পুনঃব্যবহারযোগ্য স্টাইলের জন্য ব্যবহৃত হয়। আপনি মিক্সিন তৈরি করে তার ভেতরে CSS কোড লিখতে পারেন এবং পরবর্তীতে যে কোনো সিলেক্টরে এটি ব্যবহার করতে পারেন।

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

.box {
  @include border-radius(10px); // মিক্সিন ব্যবহার
  background-color: #f1f1f1;
}

এখানে, border-radius মিক্সিন তৈরি করা হয়েছে এবং box ক্লাসে এটি ব্যবহার করা হয়েছে। মিক্সিনের মাধ্যমে আপনি একাধিক স্থানে কোড রিপিট করতে পারবেন না, এবং এক জায়গায় পরিবর্তন করলে পুরো অ্যাপ্লিকেশনে তা প্রয়োগ হবে।

৪. ইনহেরিটেন্স (Inheritance)

Sass এর @extend নির্দেশক ব্যবহার করে আপনি একাধিক সিলেক্টরের মধ্যে শৈলী ইনহেরিট (inherit) করতে পারেন।

.button {
  padding: 10px 20px;
  background-color: #3498db;
}

.btn-primary {
  @extend .button;
  background-color: #2ecc71;
}

এখানে, .btn-primary ক্লাসটি .button ক্লাসের শৈলীকে ইনহেরিট করছে এবং তার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হচ্ছে।

৫. অপারেটরস (Operators)

Sass আপনাকে আরিথমেটিক অপারেটর যেমন যোগফল (+), বিয়োগ (-), গুণ (*) এবং ভাগ (/)-এর মাধ্যমে গণনা করতে সাহায্য করে।

$width: 100px;
$height: 50px;

.container {
  width: $width + 20px;
  height: $height * 2;
}

এখানে, $width এবং $height ভেরিয়েবলগুলোর উপর অপারেশন করা হচ্ছে এবং ফলস্বরূপ স্টাইল সেট করা হচ্ছে।

SCSS ফাইল থেকে CSS ফাইল তৈরি করা

Sass ফাইল (.scss) তৈরি করার পর, আপনাকে সেই ফাইলকে CSS ফাইলে কম্পাইল (compile) করতে হবে। এটি করতে sass কমান্ড লাইন টুল ব্যবহার করতে পারেন।

1. Sass ইনস্টল করা: প্রথমে আপনাকে Sass ইনস্টল করতে হবে। এটি npm বা yarn দিয়ে ইনস্টল করা যায়।

   npm install -g sass
   

2. Sass ফাইল কম্পাইল করা: SCSS ফাইলকে CSS ফাইলে কম্পাইল করতে, টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:

   sass style.scss style.css
   

   এই কমান্ডটি style.scss ফাইলটিকে CSS তে কম্পাইল করে style.css ফাইলে রূপান্তর করবে।

সারাংশ

Sass হল একটি শক্তিশালী CSS প্রিপ্রোসেসর যা আপনাকে CSS-কে আরও কার্যকরীভাবে লেখার সুবিধা দেয়। SCSS সিনট্যাক্স ব্যবহার করে আপনি ভেরিয়েবল, নেস্টিং, মিক্সিন, ইনহেরিটেন্স, এবং অপারেটরস ব্যবহার করতে পারেন যা আপনার কোডকে আরো রিডেবেল এবং মেইনটেনযোগ্য করে তোলে। Sass ব্যবহার করলে, কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায় এবং আপনার CSS লেখার প্রক্রিয়া অনেক সহজ হয়ে ওঠে।

Sass এবং SCSS কি?

Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর, যা CSS লেখার প্রক্রিয়াকে আরও কার্যকরী এবং ডাইনামিক করে তোলে। Sass CSS এর সাথে কিছু অতিরিক্ত বৈশিষ্ট্য যুক্ত করে, যেমন ভেরিয়েবলস, নেস্টিং, পার্সিং ফাংশনস, এবং মিক্সিনস, যা স্টাইলশীট লেখাকে আরও রক্ষণাবেক্ষণযোগ্য এবং পাঠযোগ্য করে তোলে।

Sass-এর দুটি সিনট্যাক্স রয়েছে:

1. Sass সিনট্যাক্স: এটি পূর্বের (পুরনো) সিনট্যাক্স যেখানে সেমিকোলন এবং কিউরলি ব্রেস ({}) ব্যবহার করা হয় না। এই সিনট্যাক্সটি আরও বেশি মাইক্রোফর্ম্যাট এবং ইন্ডেন্টেশন ভিত্তিক।
2. SCSS সিনট্যাক্স: এটি Sass সিনট্যাক্সের উন্নত সংস্করণ। SCSS হল CSS-এর আরও উপযুক্ত একটি সিনট্যাক্স যা সেমিকোলন এবং কিউরলি ব্রেস ({}) ব্যবহার করে। এটি CSS এর মতোই দেখতে এবং লিখতে সহজ, এবং এটি CSS এর সাথে সম্পূর্ণ সামঞ্জস্যপূর্ণ।

SCSS এবং Sass সিনট্যাক্স এর মধ্যে পার্থক্য

Sass সিনট্যাক্স উদাহরণ

Sass সিনট্যাক্সে, সেমিকোলন এবং কিউরলি ব্রেস ব্যবহৃত হয় না। এর বদলে ইনডেন্টেশন ব্যবহৃত হয়।

$primary-color: #333
$font-stack: Helvetica, sans-serif

body
  font: 100% $font-stack
  color: $primary-color

h1
  color: $primary-color

এখানে, $primary-color এবং $font-stack এর মতো ভেরিয়েবল ব্যবহার করা হয়েছে, এবং সমস্ত CSS প্রপার্টি ইনডেন্টেশন দ্বারা আলাদা করা হয়েছে।

SCSS সিনট্যাক্স উদাহরণ

SCSS সিনট্যাক্সটি CSS-এর মতো দেখতে এবং CSS এর সমস্ত বৈশিষ্ট্য ধারণ করে। এখানে সেমিকোলন এবং কিউরলি ব্রেস ব্যবহার করা হয়।

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

h1 {
  color: $primary-color;
}

এখানে SCSS সিনট্যাক্সে সেমিকোলন এবং কিউরলি ব্রেস ব্যবহার করা হয়েছে, যা CSS এর মতোই।

SCSS বনাম Sass: কোনটি ব্যবহার করবেন?

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

Sass সিনট্যাক্স কিছুটা বেশি সংকীর্ণ এবং ইন্ডেন্টেশন ভিত্তিক, যা কিছু ডেভেলপারদের পছন্দ হতে পারে যারা ছোট, পাঠযোগ্য কোড পছন্দ করেন এবং খুবই পরিশীলিত স্টাইলশিট তৈরি করতে চান।

SCSS ব্যবহারের উপকারিতা:

• এটি CSS এর মতোই দেখতে এবং ব্যবহার করা সহজ।
• এক্সিস্টিং CSS ফাইলগুলিকে দ্রুত SCSS ফাইলে রূপান্তর করা সম্ভব।
• আপনি সহজেই CSS এবং SCSS কোড একত্রিত করতে পারেন।

Sass ব্যবহারের উপকারিতা:

• কোডের স্টাইল ও ইন্ডেন্টেশন গঠন আরও পাঠযোগ্য হয়।
• ছোট কোড রাইটিংয়ের জন্য সুবিধাজনক, কারণ সেমিকোলন এবং কিউরলি ব্রেস প্রয়োজন নেই।

সারাংশ

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

Sass কি?

Sass (Syntactically Awesome Stylesheets) একটি প্রি-প্রসেসর যা CSS (Cascading Style Sheets) এর উন্নত সংস্করণ। এটি CSS এর জন্য শক্তিশালী ফিচার সরবরাহ করে, যেমন variables, nested rules, mixins, partials, এবং imports। Sass কোড আরও সংক্ষিপ্ত, কার্যকরী এবং রক্ষণাবেক্ষণযোগ্য হতে সাহায্য করে।

Sass আপনাকে CSS লিখতে আরও ক্ষমতাশালী এবং কার্যকরী উপায়ে সাহায্য করে। Sass একটি প্রি-প্রসেসর, অর্থাৎ আপনাকে Sass ফাইল লিখে সেগুলিকে CSS ফাইলে কম্পাইল করতে হয় যাতে ব্রাউজার তা পড়ে এবং স্টাইল প্রয়োগ করতে পারে।

Sass ফাইল তৈরি করা

Sass ফাইল তৈরি করতে, প্রথমে আপনাকে .scss বা .sass এক্সটেনশনের একটি ফাইল তৈরি করতে হবে। .scss হলো Sass এর একটি সিনট্যাক্স যা CSS এর মতোই কনভেনশন অনুসরণ করে, যেখানে ; এবং {} ব্যবহার করা হয়। .sass একটি বেশি কমপ্যাক্ট সিনট্যাক্স যা CSS এর মতো সেমিকোলন এবং ব্রেসেস ছাড়াই কাজ করে।

উদাহরণ ১: SCSS ফাইল তৈরি করা

styles.scss

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

h1 {
  color: white;
  font-size: 2em;
}

এখানে, $primary-color একটি variable যা পুরো স্টাইলশিটে পুনঃব্যবহারযোগ্য। এখানে আমরা SCSS সিনট্যাক্স ব্যবহার করেছি।

Sass ফাইলকে CSS এ কম্পাইল করা

Sass ফাইল তৈরি করার পর, আপনাকে সেই ফাইলটি CSS ফাইলে কম্পাইল করতে হবে যাতে ব্রাউজার তা পড়তে পারে। Sass ফাইল কম্পাইল করতে আপনাকে Node.js, npm, এবং Sass ইনস্টল করতে হবে।

১. Sass ইনস্টল করা

প্রথমে, আপনার সিস্টেমে Node.js এবং npm ইনস্টল করা থাকতে হবে। তারপর আপনাকে Sass ইনস্টল করতে হবে। এটি ইনস্টল করতে নীচের কমান্ডটি ব্যবহার করুন:

npm install -g sass

এটি Sass কে গ্লোবালি ইনস্টল করবে, যার ফলে আপনি যে কোনো জায়গা থেকে কম্পাইল করতে পারবেন।

২. Sass ফাইল কম্পাইল করা

Sass ফাইল কম্পাইল করার জন্য, আপনি নীচের কমান্ডটি ব্যবহার করতে পারেন:

sass styles.scss styles.css

এই কমান্ডটি styles.scss ফাইলটিকে styles.css ফাইলে কম্পাইল করবে।

৩. কম্পাইল অপশন

Sass এর আরও কিছু কম্পাইল অপশন রয়েছে যা ব্যবহার করে আপনি কাজের ধারাকে সহজ করতে পারেন:

• ওয়াচ মোড: আপনি যদি একটি ফাইলের পরিবর্তন সাপেক্ষে অটোমেটিক্যালি কম্পাইল করতে চান, তবে --watch ফ্ল্যাগ ব্যবহার করতে পারেন:

  sass --watch styles.scss:styles.css
  

  এতে, styles.scss ফাইলটি পরিবর্তিত হলেই তা স্বয়ংক্রিয়ভাবে styles.css ফাইলে কম্পাইল হয়ে যাবে।

• কম্পাইল ডিরেক্টরি: আপনি যদি একটি ডিরেক্টরি কম্পাইল করতে চান, তবে নীচের মতো কমান্ড ব্যবহার করতে পারেন:

  sass --watch scss/:css/
  

  এতে, scss ডিরেক্টরির সমস্ত .scss ফাইলকে css ডিরেক্টরিতে .css ফাইলে কম্পাইল করা হবে।

Sass এর অন্যান্য ফিচার

1. Variables (ভেরিয়েবল): Sass এ আপনি CSS বৈশিষ্ট্যগুলির মান সংরক্ষণ করতে পারার জন্য ভেরিয়েবল ব্যবহার করতে পারেন।

   $primary-color: #3498db;
   $font-stack: Helvetica, sans-serif;
   

2. Nesting (নেস্টিং): CSS এর নিয়মগুলোকে আরও সংগঠিতভাবে লিখতে নেস্টিং করা যায়।

   .container {
     width: 100%;
     padding: 20px;
   
     .header {
       background-color: $primary-color;
       color: white;
     }
   }
   

3. Mixins (মিক্সিন): আপনি CSS রুলের পুনঃব্যবহারযোগ্য ব্লক তৈরি করতে মিক্সিন ব্যবহার করতে পারেন।

   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     border-radius: $radius;
   }
   
   .box { 
     @include border-radius(10px); 
   }
   

4. Inheritance (ইনহেরিটেন্স): CSS ক্লাসের মধ্যে ইনহেরিটেন্স সৃষ্টি করা যায়, যা কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করে।

   .button {
     padding: 10px 15px;
     border-radius: 5px;
   }
   
   .primary-button {
     @extend .button;
     background-color: $primary-color;
   }
   

সারাংশ

Sass হল CSS এর একটি প্রি-প্রসেসর যা উন্নত ফিচার যেমন ভেরিয়েবল, মিক্সিন, নেস্টিং এবং ইনহেরিটেন্স সরবরাহ করে। Sass ফাইল তৈরি করা এবং CSS এ কম্পাইল করা খুবই সহজ। Node.js এবং Sass ইনস্টল করে আপনি Sass ফাইল তৈরি করতে পারবেন এবং সেগুলিকে CSS ফাইলে কম্পাইল করতে পারবেন। --watch অপশন ব্যবহার করে আপনি ফাইল পরিবর্তন হবার সাথে সাথে কম্পাইল করতে পারেন, যা ডেভেলপমেন্টের সময় অনেক সুবিধাজনক।

সাস (Sass) কি?

Sass (Syntactically Awesome Stylesheets) একটি CSS প্রিপ্রসেসর যা CSS এর ওপর উন্নত ফিচার সরবরাহ করে, যেমন ভ্যারিয়েবলস, নেস্টেড সিলেক্টর, মিক্সিন্স, ইম্পোর্ট এবং ইনহেরিটেন্স। Sass এর মাধ্যমে CSS কোড আরও ক্লিন, রিডেবল এবং পুনঃব্যবহারযোগ্য হয়। এটি আপনাকে একটি শক্তিশালী স্টাইলশিট তৈরি করার সুবিধা দেয় যা বড় অ্যাপ্লিকেশন বা ওয়েবসাইটের জন্য উপযুক্ত।

Sass দুটি সিনট্যাক্সে কাজ করে:

• SCSS (Sassy CSS) - যা CSS এর মতোই, তবে Sass এর অতিরিক্ত ফিচার ব্যবহার করতে পারে।
• Sass (Indented Syntax) - যেখানে ইনডেন্টেশন ব্যবহার করে স্টাইল লেখা হয়।

এখানে আমরা SCSS সিনট্যাক্সের উপর ভিত্তি করে CSS এর মতো Sass কোড লেখা নিয়ে আলোচনা করব।

১. Sass ভ্যারিয়েবলস ব্যবহার করা

CSS এর মতো সরাসরি ভ্যারিয়েবল ব্যবহার করা যায় না, তবে Sass আপনাকে ভ্যারিয়েবল ব্যবহার করার সুযোগ দেয়, যা কোডকে আরও ডাইনামিক এবং রিইউসেবল করে তোলে।

উদাহরণ:

$primary-color: #3498db;
$font-size: 16px;

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

এখানে, $primary-color এবং $font-size ভ্যারিয়েবলগুলি ব্যবহার করা হয়েছে। আপনি সেগুলিকে পরে আপনার কোডের যেকোনো স্থানে ব্যবহার করতে পারবেন, যেহেতু এগুলি পরিবর্তনযোগ্য।

২. নেস্টেড সিলেক্টর

Sass-এ নেস্টেড সিলেক্টর ব্যবহার করা যায়, যা CSS এর কোডের structure আরও পরিষ্কার এবং পাঠযোগ্য করে তোলে। CSS-এ সিলেক্টরগুলো আলাদা আলাদা সত্ত্বা (block) হিসেবে রাখতে হয়, তবে Sass এ আপনি সিলেক্টরগুলোকে একে অপরের মধ্যে নেস্ট করতে পারেন।

উদাহরণ:

nav {
  background-color: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        padding: 10px;
        text-decoration: none;
        
        &:hover {
          background-color: #555;
        }
      }
    }
  }
}

এখানে, nav, ul, li, এবং a সিলেক্টরগুলোকে সাসের মধ্যে নেস্ট করা হয়েছে। এটি CSS কোডের গঠন আরও সুসংগত এবং পরিষ্কার করে তোলে।

৩. Mixin ব্যবহার করা

Mixin হল এক ধরনের ফাংশন, যেগুলি একাধিক বার কোড পুনরায় ব্যবহার করতে দেয়। একাধিক প্রোপার্টি গ্রুপ করতে এবং তারপর সেগুলি অন্যান্য সিলেক্টরে অ্যাপ্লাই করতে mixin ব্যবহার করা হয়।

উদাহরণ:

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

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

এখানে, border-radius সম্পর্কিত প্রোপার্টিগুলি একটি মিক্সিন হিসেবে রাখা হয়েছে এবং .box সিলেক্টরের মধ্যে এই মিক্সিনটি ব্যবহার করা হয়েছে।

৪. ইনহেরিটেন্স (Inheritance)

Sass এর @extend ডিরেক্টিভ ব্যবহার করে আপনি এক সিলেক্টরের সমস্ত স্টাইল অন্য সিলেক্টরে হেরিট (inherit) করতে পারেন। এটি আপনার কোডকে আরও কমপ্যাক্ট এবং পুনঃব্যবহারযোগ্য করে তোলে।

উদাহরণ:

.error {
  color: red;
  font-weight: bold;
}

.notice {
  @extend .error;
  background-color: yellow;
}

এখানে, .notice সিলেক্টরটি .error সিলেক্টরের সমস্ত প্রোপার্টি হেরিট করছে এবং পাশাপাশি নিজস্ব প্রোপার্টি যোগ করছে।

৫. Sass এর সাথে CSS ফাইল ইম্পোর্ট করা

Sass এ @import ডিরেক্টিভ ব্যবহার করে আপনি একাধিক ফাইলকে একত্রে যুক্ত করতে পারেন। এর মাধ্যমে আপনি স্টাইলশিটকে বিভিন্ন মডিউলে ভাগ করে রাখতে পারেন এবং পরে সেগুলো একত্রিত করতে পারেন।

উদাহরণ:

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

// main.scss
@import 'colors';

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

এখানে, _colors.scss ফাইলের ভ্যারিয়েবলস main.scss ফাইলে ইম্পোর্ট করা হয়েছে। আপনি এইভাবে আপনার প্রোজেক্টে কোডকে আরও মডুলার এবং সুসংগত রাখতে পারবেন।

৬. Partials এবং Imports

Sass এ partials ফাইল ব্যবহার করার মাধ্যমে আপনি কোডের বিভিন্ন অংশ আলাদা আলাদা ফাইলে লিখতে পারেন এবং পরে সেগুলোকে @import ডিরেক্টিভ দিয়ে একত্রিত করতে পারেন। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং মেইনটেনেবলিটি বাড়ায়।

উদাহরণ:

// _variables.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// main.scss
@import 'variables';

body {
  font-family: $font-stack;
  color: $primary-color;
}

এখানে, _variables.scss ফাইলে ভ্যারিয়েবলস সংরক্ষিত আছে, এবং main.scss ফাইলে সেগুলো ইম্পোর্ট করা হয়েছে।

সারাংশ

Sass (Syntactically Awesome Stylesheets) CSS এর একটি শক্তিশালী প্রিপ্রসেসর যা কোডের রিডেবিলিটি এবং রিইউসেবিলিটি বৃদ্ধি করতে সাহায্য করে। Sass কোড লেখার মাধ্যমে আপনি ভ্যারিয়েবলস, নেস্টেড সিলেক্টর, মিক্সিনস, ইনহেরিটেন্স এবং ইম্পোর্ট ফিচার ব্যবহার করতে পারেন যা CSS কোডের গঠন এবং কার্যকারিতা আরও উন্নত করে। Sass কোড লেখার মাধ্যমে আপনার ওয়েব ডেভেলপমেন্টের প্রক্রিয়া সহজ, দ্রুত এবং আরও মডুলার হতে পারে।

Sass কি?

Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর যা CSS কোডকে আরও শক্তিশালী, সুষম, এবং রিইউজেবল করে তোলে। Sass-এ আপনি ভেরিয়েবল, নেস্টিং, মিক্সিন, ইনহেরিটেন্স এবং অন্যান্য ফিচার ব্যবহার করতে পারেন যা স্টাইল শীট লিখতে সুবিধা প্রদান করে। এটি CSS এর উপর অতিরিক্ত ফিচার প্রদান করে, যার মাধ্যমে CSS কোড আরও দ্রুত এবং কার্যকরভাবে লেখা যায়।

Sass এর দুটি ফাইল এক্সটেনশন রয়েছে:

1. .scss (Sassy CSS): এটি CSS-এর মতো সিনট্যাক্সে লেখা হয়।
2. .sass: এটি একটি প্রাচীন সিনট্যাক্স যা সেমি-কোলন এবং ব্রেস ব্যবহার না করে।

এখানে আমরা scss ফাইল কম্পাইল করার প্রক্রিয়া সম্পর্কে আলোচনা করব।

প্রথম Sass ফাইল কম্পাইল এবং আউটপুট তৈরি

১. Sass ইনস্টলেশন

প্রথমে আপনার সিস্টেমে Sass ইনস্টল করতে হবে। Sass এর জন্য NPM (Node Package Manager) ব্যবহার করা হয়।

Sass ইনস্টল করার জন্য কমান্ড:

npm install -g sass

এটি সাস ইনস্টল করবে এবং কমান্ড লাইন থেকে sass কমান্ডটি ব্যবহারের সুযোগ দেবে।

২. Sass ফাইল তৈরি করা

এখন, একটি নতুন .scss ফাইল তৈরি করুন যেখানে আপনি স্টাইল শীট লিখবেন। উদাহরণস্বরূপ, styles.scss নামে একটি ফাইল তৈরি করুন।

styles.scss ফাইলের মধ্যে কিছু Sass কোড লেখুন:

// Variable
$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

h1 {
  color: darken($primary-color, 10%);
}

p {
  color: lighten($primary-color, 30%);
}

এখানে, আমরা একটি ভেরিয়েবল $primary-color তৈরি করেছি এবং সেই ভেরিয়েবলটি বডি, হেডিং, এবং প্যারাগ্রাফের জন্য বিভিন্ন শেডে ব্যবহার করেছি।

৩. Sass ফাইল কম্পাইল করা

Sass ফাইল কম্পাইল করার জন্য, নিচের কমান্ডটি ব্যবহার করুন:

sass styles.scss styles.css

এখানে:

• styles.scss: আপনার Sass ফাইল।
• styles.css: আউটপুট CSS ফাইল যা কম্পাইল হওয়ার পর তৈরি হবে।

এই কমান্ডটি styles.scss ফাইলটি কম্পাইল করে একটি নতুন styles.css ফাইল তৈরি করবে।

৪. CSS আউটপুট

যখন আপনি sass styles.scss styles.css কমান্ডটি রান করবেন, তখন এটি styles.css ফাইলে নিম্নলিখিত CSS আউটপুট তৈরি করবে:

body {
  background-color: #3498db;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2980b9;
}

p {
  color: #66b3e3;
}

এখানে, Sass ভেরিয়েবল এবং ফাংশন ব্যবহার করে যে স্টাইল ছিল, তা এখন সাধারণ CSS কোডে পরিণত হয়েছে এবং এটি ব্রাউজারে কার্যকরীভাবে চলবে।

৫. Watch Mode ব্যবহার করা

আপনি যদি বারবার ফাইল কম্পাইল না করে প্রতিবার পরিবর্তন করতে চান, তাহলে watch mode ব্যবহার করতে পারেন। এটি আপনার Sass ফাইলের পরিবর্তন সনাক্ত করে স্বয়ংক্রিয়ভাবে CSS ফাইল আপডেট করবে।

sass --watch styles.scss:styles.css

এখন, আপনি যখন styles.scss ফাইলটি আপডেট করবেন, তখন এটি স্বয়ংক্রিয়ভাবে styles.css ফাইলকে আপডেট করবে।

সারাংশ

Sass হল একটি শক্তিশালী CSS প্রিপ্রসেসর যা CSS কোডকে আরও সুসংগঠিত এবং রিইউজেবল করে তোলে। আপনার প্রথম Sass ফাইল কম্পাইল এবং আউটপুট তৈরি করতে, আপনাকে সিস্টেমে Sass ইনস্টল করতে হবে এবং এরপর .scss ফাইল তৈরি করে সেটি .css ফাইলে কম্পাইল করতে হবে। Watch mode ব্যবহার করলে আপনি আপনার Sass ফাইল পরিবর্তন করার সাথে সাথে CSS ফাইলটি স্বয়ংক্রিয়ভাবে আপডেট করতে পারবেন। Sass এর মাধ্যমে আপনি আরও সহজে এবং দ্রুত CSS কোড লিখতে পারবেন।