SASS-এর মৌলিক বিষয়াবলি
এই নিবন্ধে SASS-এর মৌলিক বিষয়াবলি ব্যাখ্যা করা হয়েছে।
আমরা SASS-এর মৌলিক বৈশিষ্ট্যগুলো ধাপে ধাপে ব্যাখ্যা করব এবং ব্যবহারিক নমুনা কোডের মাধ্যমে সেগুলো ব্যবহারের উপায় দেখাব।
YouTube Video
SASS-এর মৌলিক বিষয়াবলি
SASS (Syntactically Awesome Stylesheets) একটি স্টাইলশিট ভাষা যা CSS কে আরো সমৃদ্ধ করে। SASS ব্যবহার করলে আপনি ভ্যারিয়েবল, নেস্টিং, মিক্সিন এবং ইনহেরিট্যান্সের মতো CSS-এ অনুপলব্ধ উন্নত ফিচারগুলো ব্যবহার করতে পারেন। এর ফলে স্টাইলশীট ব্যবস্থাপনা এবং পুনঃব্যবহার অনেক সহজ হয়ে যায়।
SASS কি?
SASS একটি ভাষা যা CSS লেখাকে সহজ করে এবং আরও নমনীয় ও শক্তিশালী স্টাইলিংয়ের সুযোগ দেয়। SASS-এ SCSS (Sassy CSS) সিনট্যাক্সও আছে, যা স্ট্যান্ডার্ড CSS সিনট্যাক্সের সাথে মিল রয়েছে। এখানে একটি উদাহরণ দেওয়া হল:।
SCSS উদাহরণ
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS উদাহরণ
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASS সেটআপ করা
কিভাবে ইনস্টল করবেন
SASS ব্যবহার করতে প্রথমে Node.js ইনস্টল করুন এবং তারপর নিম্নলিখিত কমান্ড ব্যবহার করে SASS ইনস্টল করুন:।
1npm install -g sassকিভাবে কম্পাইল করবেন
SASS ফাইলগুলো (.scss বা .sass) কে CSS-এ কম্পাইল করতে নিম্নলিখিত কমান্ড ব্যবহার করুন:।
1sass input.scss output.cssআপনি ফাইল পরিবর্তন নজরদারি এবং রিয়েল-টাইম কম্পাইল করার জন্য ‘watch’ অপশনও ব্যবহার করতে পারেন।
ভেরিয়েবলস
SASS আপনাকে ভেরিয়েবল ব্যবহার করতে দেয় যাতে আপনি রঙ ও ফন্ট সাইজের মতো মান বারবার ব্যবহার করতে পারেন।
নমুনা কোড
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- এই কোডে SASS ভ্যারিয়েবল ব্যবহার করে রং ও ফন্ট নির্ধারণ করা হয়েছে এবং এগুলো
bodyসেলেক্টরের মধ্যে পুনঃব্যবহার করা হয়েছে যাতে সামঞ্জস্যতা ও রক্ষণাবেক্ষণ সহজ হয়।
কম্পাইল করা ফলাফল
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}নেস্টিং
SASS-এ CSS সিলেক্টর নেস্ট করা যায়, ফলে কোডের পাঠযোগ্যতা বাড়ে।
নমুনা কোড
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- এই কোডটি স্টাইলের গঠনকে দৃশ্যত পরিষ্কার করার জন্য নেস্টেড হায়ারাকি ব্যবহার করেছে।
কম্পাইল করা ফলাফল
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}মিক্সিন
মিক্সিনের মাধ্যমে একাধিক সিলেক্টরে একই কোড পুনঃব্যবহার করা যায়।
নমুনা কোড
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}@mixinব্যবহার করে এই কোডে একটিborder-radiusস্টাইল নির্ধারণ করা হয়েছে এবং@includeএর মাধ্যমেbuttonও.cardএ তা পুনঃব্যবহার করা হয়েছে, ফলে ডুপ্লিকেশন ছাড়াই কার্যকরী স্টাইলিং সম্ভব হয়েছে।
কম্পাইল করা ফলাফল
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}ইনহেরিটেন্স (@extend)
ইনহেরিটেন্স-এর মাধ্যমে বিদ্যমান স্টাইল অন্য সিলেক্টরে প্রয়োগ করা যায়।
নমুনা কোড
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- এই কোডে
%button-styleনামক প্লেসহোল্ডার সেলেক্টর ব্যবহার করা হয়েছে এবং@extendদ্বারা সাধারণ স্টাইলগুলোbuttonও.link-buttonউভয়ে প্রয়োগ করা হয়েছে, ফলে পুনঃব্যবহার ও সামঞ্জস্যতা সহজ হয়েছে।
কম্পাইল করা ফলাফল
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}কন্ডিশনাল ও লুপ
SASS-এ কন্ডিশনাল ও লুপ সাপোর্ট করে, যার মাধ্যমে ডায়নামিকভাবে স্টাইল তৈরি করা যায়।
কন্ডিশনাল স্টেটমেন্টের উদাহরণ
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- এই কোডে SASS-এর
ifফাংশন ব্যবহার করে$themeভ্যালুর উপর ভিত্তি করে ব্যাকগ্রাউন্ড ও টেক্সট কালার পরিবর্তন করা হয়েছে, ফলে শর্তানুযায়ী ডাইনামিক স্টাইল তৈরি সম্ভব হয়।
লুপের উদাহরণ
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- এই কোডে SASS-এর
@forলুপ ব্যবহার করে ডাইনামিকভাবে.column-1থেকে.column-3পর্যন্ত ক্লাস তৈরি করা হয়েছে।
কম্পাইল করা ফলাফল
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}ফাইল বিভাজন ও ইমপোর্টিং
SASS-এ @use বা @import ব্যবহার করে ফাইল ভাগ করা ও সেগুলোর পুনঃব্যবহার করা যায়।
ফাইলের কাঠামো
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}কম্পাইল করা ফলাফল
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}সারসংক্ষেপ
SASS ব্যবহার করলে CSS লেখা সহজ হয় এবং কোডের পুনঃব্যবহারযোগ্যতা ও রক্ষণাবেক্ষণযোগ্যতা বাড়ে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।