SCSS (Sassy CSS) এবং CSS Variables (CSS Custom Properties) হল আধুনিক ওয়েব ডেভেলপমেন্টে ব্যবহৃত দুটি শক্তিশালী টুল যা ওয়েব ডিজাইন এবং কাস্টমাইজেশনকে আরও সহজ এবং শক্তিশালী করে তোলে। Pure.CSS ব্যবহার করার সময়, SCSS এবং CSS Variables ব্যবহার করে কাস্টমাইজেশন করা ওয়েব ডিজাইনকে আরও স্কেলেবল, ম্যানটেইনেবল এবং ডাইনামিক করতে সাহায্য করে।
এখানে আমরা SCSS এবং CSS Variables ব্যবহার করে Pure.CSS এর কাস্টমাইজেশন নিয়ে আলোচনা করবো।
1. SCSS দিয়ে Pure.CSS কাস্টমাইজেশন
SCSS হল CSS এর একটি সুপারসেট যা আপনাকে variables, mixins, nested selectors, inheritance এবং অন্যান্য উন্নত ফিচারের সুবিধা দেয়। SCSS দিয়ে আপনি Pure.CSS এর থিম এবং স্টাইলিং কাস্টমাইজ করতে পারেন।
SCSS Installation:
SCSS ব্যবহার করার জন্য আপনাকে প্রথমে Sass ইনস্টল করতে হবে। যদি আপনার সিস্টেমে Node.js এবং npm ইনস্টল করা থাকে, তাহলে আপনি npm এর মাধ্যমে Sass ইনস্টল করতে পারেন।
npm install -g sass
SCSS Example for Customizing Pure.CSS:
// _variables.scss - SCSS Variables for Customization
$primary-color: #4CAF50;
$secondary-color: #f4f4f4;
$button-hover-color: #45a049;
$font-size: 16px;
// Import Pure.CSS
@import "https://unpkg.com/purecss@2.0.6/build/pure-min.css";
// Customizing Pure.CSS
body {
font-size: $font-size;
background-color: $secondary-color;
}
.navbar {
background-color: $primary-color;
a {
color: white;
padding: 14px 20px;
text-decoration: none;
&:hover {
background-color: $button-hover-color;
}
}
}
// Example of a custom button with Pure.CSS and SCSS variables
.custom-btn {
padding: 10px 20px;
background-color: $primary-color;
color: white;
border: none;
border-radius: 5px;
font-size: $font-size;
cursor: pointer;
&:hover {
background-color: $button-hover-color;
}
}
Explanation:
- SCSS Variables: SCSS ভেরিয়েবলগুলির মাধ্যমে আমরা বিভিন্ন রঙ, ফন্ট সাইজ, এবং অন্যান্য স্টাইলের জন্য কাস্টম ভ্যালু সংরক্ষণ করেছি, যা পরে পুনরায় ব্যবহার করা হয়েছে।
- Importing Pure.CSS: Pure.CSS এর প্রি-ডিফাইন্ড ক্লাসগুলির উপর ভিত্তি করে কাস্টম স্টাইল তৈরি করতে
@importদিয়ে Pure.CSS ফ্রেমওয়ার্ক অন্তর্ভুক্ত করা হয়েছে। - Custom Button: SCSS ভেরিয়েবল ব্যবহার করে একটি কাস্টম বাটন তৈরি করা হয়েছে। বাটনের হোভার ইফেক্টও SCSS এর মাধ্যমে কাস্টমাইজ করা হয়েছে।
Compiling SCSS to CSS:
SCSS কোডটি CSS তে কম্পাইল করতে আপনি নিচের কমান্ড ব্যবহার করতে পারেন:
sass styles.scss styles.css
এটি আপনার SCSS ফাইলটিকে একটি স্ট্যান্ডার্ড CSS ফাইলে কম্পাইল করবে, যা ওয়েবসাইটে ব্যবহার করা যাবে।
2. CSS Variables দিয়ে Pure.CSS কাস্টমাইজেশন
CSS Variables (Custom Properties) হল একটি আধুনিক ওয়েব ফিচার যা আপনাকে CSS ডিক্লিয়ারেশনে ভেরিয়েবল ব্যবহার করার সুবিধা দেয়। CSS Variables ডাইনামিকভাবে পরিবর্তনযোগ্য এবং এগুলি আপনার ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজেবল করে তোলে। CSS Variables পঠনযোগ্য এবং ম্যানটেইনেবল কোড লেখার জন্য সহায়ক।
CSS Variables Example for Customizing Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customizing Pure.CSS with CSS Variables</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Define CSS Variables */
:root {
--primary-color: #4CAF50;
--secondary-color: #f4f4f4;
--button-hover-color: #45a049;
--font-size: 16px;
--padding: 10px 20px;
}
/* Customizing Body and Navbar with CSS Variables */
body {
font-size: var(--font-size);
background-color: var(--secondary-color);
}
.navbar {
background-color: var(--primary-color);
}
.navbar a {
color: white;
text-decoration: none;
padding: var(--padding);
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: var(--button-hover-color);
}
/* Custom Button using CSS Variables */
.custom-btn {
padding: var(--padding);
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
font-size: var(--font-size);
cursor: pointer;
}
.custom-btn:hover {
background-color: var(--button-hover-color);
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<button class="custom-btn">Click Me</button>
</body>
</html>
ব্যাখ্যা:
--primary-color,--font-size: CSS Variables দ্বারা আমরা কাস্টম প্রপার্টি তৈরি করেছি, যা পরে বিভিন্ন CSS সেলেক্টরগুলিতে ব্যবহার করেছি।var(--primary-color): CSS Variables ব্যবহার করে আমরা বিভিন্ন স্টাইল প্রপার্টি যেমন ব্যাকগ্রাউন্ড কালার, প্যাডিং এবং ফন্ট সাইজ কাস্টমাইজ করেছি।- Customization: Pure.CSS এর মধ্যে থাকা স্টাইলের উপরে আমাদের নিজস্ব স্টাইল যোগ করতে CSS Variables ব্যবহার করা হয়েছে।
Advantages of Using CSS Variables:
- Dynamic Changes: CSS Variables পরিবর্তন করা খুব সহজ এবং তা সব জায়গায় স্বয়ংক্রিয়ভাবে আপডেট হয়।
- Maintainability: এক জায়গায় ভেরিয়েবল ডিফাইন করে আপনি আপনার ওয়েবসাইটের থিম সহজে পরিবর্তন করতে পারেন।
- Flexibility: CSS Variables এর মাধ্যমে আপনি রঙ, ফন্ট সাইজ, প্যাডিং ইত্যাদি একাধিক জায়গায় পরিবর্তন করতে পারবেন, যা কোড লেখার সময় সময় বাঁচায়।
3. SCSS এবং CSS Variables এর একত্রিত ব্যবহার
SCSS এবং CSS Variables একত্রে ব্যবহার করে আপনি আরও শক্তিশালী এবং স্কেলেবল ডিজাইন তৈরি করতে পারেন। SCSS আপনাকে কাস্টম মিক্সিন, ফাংশন এবং প্যাডিং বা মার্জিনের মতো পরিবর্তনশীল পরামর্শ প্রদান করে, যখন CSS Variables আপনাকে রিয়েল-টাইমে ডিজাইন পরিবর্তন করার সুযোগ দেয়।
SCSS and CSS Variables Example:
// _variables.scss
$primary-color: #4CAF50;
$secondary-color: #f4f4f4;
$button-hover-color: #45a049;
$font-size: 16px;
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--button-hover-color: #{$button-hover-color};
--font-size: #{$font-size};
}
// Import Pure.CSS
@import "https://unpkg.com/purecss@2.0.6/build/pure-min.css";
// Customizing with SCSS & CSS Variables
body {
font-size: var(--font-size);
background-color: var(--secondary-color);
}
.navbar {
background-color: var(--primary-color);
}
.navbar a {
color: white;
padding: 14px 20px;
}
.navbar a:hover {
background-color: var(--button-hover-color);
}
ব্যাখ্যা:
- SCSS Variables: SCSS ভেরিয়েবলগুলি ব্যবহার করে আমরা রঙ, ফন্ট সাইজ ইত্যাদি কাস্টমাইজ করেছি।
- CSS Variables: SCSS ভেরিয়েবলগুলি CSS Variables-এ কনভার্ট করা হয়েছে যা ব্রাউজার দিয়ে রিয়েল-টাইমে পরিবর্তন করা যায়।
SCSS এবং CSS Variables ব্যবহার করে Pure.CSS এর কাস্টমাইজেশন করতে পারেন সহজেই। SCSS আপনাকে স্টাইলিংকে আরও ডাইনামিক এবং মডুলার করার সুযোগ দেয়, যেখানে CSS Variables দিয়ে আপনি আপনার ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজযোগ্য করতে পারেন। এই দুটি টুল একত্রে ব্যবহারের মাধ্যমে আপনি আরও শক্তিশালী, স্কেলেবল এবং রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে পারবেন।
Read more
