SASS সিনট্যাক্স এবং SCSS সিনট্যাক্স
এই প্রবন্ধে SASS সিনট্যাক্স এবং SCSS সিনট্যাক্স ব্যাখ্যা করা হয়েছে।
আমরা SASS এবং SCSS সিনট্যাক্সের পার্থক্য বিশদভাবে ব্যাখ্যা করবো এবং আপনার বোঝাপড়া বাড়ানোর জন্য নির্দিষ্ট উদাহরণ প্রদান করবো।
YouTube Video
SASS সিনট্যাক্স এবং SCSS সিনট্যাক্স
SASS হলো একটি স্টাইলশীট ভাষা যা CSS-এর ক্ষমতা বর্ধিত করার জন্য ডিজাইন করা হয়েছে। SASS-এর দুটি সিনট্যাক্স রয়েছে। এগুলো হলো SASS সিনট্যাক্স এবং SCSS সিনট্যাক্স।
SASS এবং SCSS-এর সংক্ষিপ্ত পরিচিতি
SASS সিনট্যাক্স
SASS সিনট্যাক্স নিচের মতো লেখা হয়:।
1$primary-color: #3498db
2$secondary-color: #2ecc71
3
4body
5 font-family: Arial, sans-serif
6 color: $primary-color
7
8h1
9 font-size: 2rem
10 color: $secondary-color
11
12 &:hover
13 text-decoration: underline- একটি ইন্ডেন্টেশনের ওপর ভিত্তি করে তৈরি সিনট্যাক্স, যেখানে
{}ব্রেস বা;সেমিকোলন ব্যবহার করা হয় না। - এটি সংক্ষিপ্ত এবং সহজপাঠ্য কোড লেখার জন্য তৈরি।
- ফাইল এক্সটেনশন হলো
.sass।
SCSS সিনট্যাক্স
SCSS সিনট্যাক্স নিচের মতো লেখা হয়:।
1$primary-color: #3498db;
2$secondary-color: #2ecc71;
3
4body {
5 font-family: Arial, sans-serif;
6 color: $primary-color;
7}
8
9h1 {
10 font-size: 2rem;
11 color: $secondary-color;
12
13 &:hover {
14 text-decoration: underline;
15 }
16}- এটি CSS-এর মতো সিনট্যাক্স, যেখানে
{}ব্রেস এবং;সেমিকোলন ব্যবহৃত হয়। - বর্তমান CSS কোডের সাথে অত্যন্ত সামঞ্জস্যপূর্ণ; CSS সরাসরি একটি SCSS ফাইলে রূপান্তর করা যায়।
- ফাইল এক্সটেনশন হলো
.scss।
SASS এবং SCSS-এর প্রধান পার্থক্যগুলো
| বৈশিষ্ট্য | SASS সিনট্যাক্স | SCSS সিনট্যাক্স |
|---|---|---|
| সিনট্যাক্স | ইন্ডেন্টেশন-ভিত্তিক | CSS-এর মতো |
| এক্সটেনশন | .sass |
.scss |
কার্লি ব্রেস {} |
ব্যবহৃত হয় না | ব্যবহৃত হয় |
সেমিকোলন ; |
ব্যবহৃত হয় না | ব্যবহৃত হয় |
| CSS সামঞ্জস্যতা | কম | বেশি |
| পাঠযোগ্যতা | সংক্ষিপ্ত ও সুন্দর | বিস্তারিত এবং পরিচিত |
নির্বাচনের মাপকাঠি
কোনটি ব্যবহার করবেন তা প্রকল্প এবং টিমের প্রয়োজন অনুসারে নির্ভরশীল।
-
কখন SASS সিনট্যাক্স বেছে নেবেন
- SASS সিনট্যাক্সের মাধ্যমে আপনি সংক্ষিপ্ত ও পরিষ্কার কোড লিখতে পারবেন।
- যদি পুরো টিম SASS সিনট্যাক্স এর সাথে পরিচিত হয়, তা হলে এটি একটি উপযুক্ত পছন্দ।
-
কখন SCSS সিনট্যাক্স বেছে নেবেন
- যদি CSS-এর সাথে সামঞ্জস্যতা গুরুত্বপূর্ণ হয় এবং দলের অনেক সদস্য CSS জানেন, তাহলে SCSS সিনট্যাক্স বেশি উপযুক্ত।
SASS এবং SCSS-এর সুবিধাসমূহ
নিম্নলিখিতগুলো SASS এবং SCSS উভয় সিনট্যাক্সের সাধারণ সুবিধা:।
- ভেরিয়েবলের ব্যবহার
1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5 font: 100% $font-stack;
6 color: $primary-color;
7}- ভেরিয়েবল ব্যবহার করে, আপনি এক জায়গায় একটি স্টাইল সংজ্ঞায়িত করে তা একাধিক স্থানে পুনরায় ব্যবহার করতে পারেন। কেবল ভেরিয়েবলের মান পরিবর্তন করেই সকল ডিজাইনে পরিবর্তন আনা যায়, যা মেইনটেইনেবিলিটি উন্নত করে।
- মিক্সিন
1@mixin border-radius($radius) {
2 -webkit-border-radius: $radius;
3 -moz-border-radius: $radius;
4 border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}- মিক্সিন ব্যবহার করে স্টাইল বা ভেন্ডর-প্রিফিক্সড কোডগুলোকে একত্রিত করা যায় যা একাধিক স্থানে বারবার ব্যবহৃত হয় এবং আর্গুমেন্ট ব্যবহার করে সেগুলো নমনীয়ভাবে প্রয়োগ করা যায়। এর ফলে কোডের পুনরাবৃত্তি কমে এবং রক্ষণাবেক্ষণ সহজ হয়।
- নেস্টেড নিয়মাবলী
1nav {
2 ul {
3 margin: 0;
4 padding: 0;
5 list-style: none;
6 }
7
8 li { display: inline-block; }
9 a { text-decoration: none; }
10}- নেস্টিং ব্যবহারের মাধ্যমে আপনি HTML গঠন অনুযায়ী স্টাইলগুলো শ্রেণিবদ্ধভাবে লিখতে পারেন, ফলে সম্পর্কিত নিয়মগুলো একত্রিত করা সহজ হয়। এতে কোডের পাঠযোগ্যতা ও রক্ষণাবেক্ষণযোগ্যতা উভয়ই বাড়ে।
- ইনহেরিটেন্স
1%button-style {
2 display: inline-block;
3 padding: 10px 20px;
4 font-size: 16px;
5}
6
7.btn-primary {
8 @extend %button-style;
9 background-color: blue;
10 color: white;
11}
12
13.btn-secondary {
14 @extend %button-style;
15 background-color: gray;
16 color: black;
17}- ইনহেরিট্যান্স ব্যবহার করে আপনি সাধারণ স্টাইলগুলো গোষ্ঠীভুক্ত ও পুনঃব্যবহার করতে পারেন। এতে কোডের পুনরাবৃত্তি কমে এবং একটি সঙ্গতিপূর্ণ ডিজাইন বজায় থাকে।
উপসংহার
SASS এবং SCSS-এর মধ্যে কোনটি বেছে নেবেন তা ডেভেলপার ও প্রকল্পের চাহিদার ওপর নির্ভর করে।
SASS সিনট্যাক্সে সরলতা বেশি গুরুত্ব পায়, আবার SCSS সিনট্যাক্সে CSS-এর সাথে সামঞ্জস্যতার ওপর বেশি গুরুত্ব দেয়া হয়েছে। উভয় সিনট্যাক্সই শক্তিশালী এবং CSS উৎপাদনশীলতা অনেক বাড়াতে সক্ষম।
আপনার প্রকল্পের জন্য সবচেয়ে উপযুক্ত অপশন বেছে নিলে স্টাইলশীট ব্যবস্থাপনা আরো কার্যকরী হবে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।