আজকে আমরা শিখব SASS সম্পর্কে লেখকঃ রাশেদুল ইসলাম সিহাব ~~~ সর্বশেষ আপডেটঃ ৯ ডিসেম্বর ২০২২

প্রতিটি অধ্যায়ের নাম SASS কি? - what is SASS SASS শিখতে কিভাবে প্রস্তুতি নিতে পারি ? what are prerequities to learn SASS কেন SASS শিখব ? - why SASS? কিভাবে SASS কাজ করে ? - how to does SASS work? কিভাবে SASS HTML ফাইলের সাথে যুক্ত করব ? - how to add SASS to HTML? variables and nestings css rules Nesting css rules Partials and sass settings VS code settings (must be) lets talk about module @mixin and @include @include and @inheritance @if @else @else if এঁর ব্যাবহার Loop - For - while SASS কি? - what is SASS SASS is a syntactically awesome style sheet. It's is extension of CSS SASS designed by hampton cattin and developed by natalie weizenbaum in 2006. SASS শিখতে কিভাবে প্রস্তুতি নিতে পারি ? - what are prerequities to learn SASS HTML CSS Javascript (will help you greatly specially for @if, @for, @while etc.) কেন SASS শিখব ? - why SASS? sass has some extra special features that do not exist in CSS. variables nested rules. mixins, imports inheritance extra features এঁর উদ্দেশ্য হলো to make our code simpler and more maintainable. no DRY (we can @extend css rules) ---> already কোণ কোড লিখে থাকলে সেগুলো আবার নিয়ে আসতে পারবেন । ফ্রি তে ডাউনলোড করা যায় । এটা CSS এঁর সব ভার্সন সাপোর্ট করে । কিভাবে SASS কাজ করে ? - how to does SASS work? extension হবে .scss দিয়ে ।

browser তো SASS বুঝতে পারবে না । তাই এই নিয়মে কাজ করবে ।

SASS code demo.scss ---> pre-processor (transpiler) এটা স্ট্যান্ডার্ড কোডে রূপান্তর করবে । ---> standard css code (demo.css) ---> browser

কিভাবে SASS HTML ফাইলের সাথে যুক্ত করব ? - how to add SASS to HTML? install live sass compailer in VS code create a stykle folder. ---> demo.scss --> add some code into thi#. <link ref="stylesheet" href="styles/demo.css"> start watching SASS css এঁর যেভাবে কমেন্ট করতাম ঠিক সেই দুই নিয়মেই SASS এ কমেন্ট করা যাবে । SASS এ সিএসএস এঁর সব স্ট্যান্ডার্ড কোড করতে পারবেন । extension টা ইন্সটল করা হলে SV code এর একদম নিচে watch sass নামে একটা মেনু/ বাটন পাব সেখানে ক্লিক করে দিব । variales and nestings css rules Learning outlines how to declare -SASS variables how to use SASS variables how to do nesting css rules CSS variables :root { --primary-color: green; } h1 { color: var(--primary-color, red); } SASS variables sass variables is more similar than css variables that we have used already.

like JS(let,const) we can start declaring the variables using $ sign example: $header-bdColor: colorName; $main-bgColor: colorName; $para-fontSize: size; $para-font: 15px; usaing: header{ background-color:$header-bgColor; } using SASS variables we can store. number string boolean colors. lists null nesting css rules প্রথমত html এ

<nav> <ul> <li> <a href="#">list</a> </li> </ul> </nav> বানিয়ে নিব । এখন nav এর ul, li, a কে ডিজাইন করতে চাইলে অবশ্যয় এইভাবে করতাম

nav{

} nav ul{

} nav ul li {

} nav ul li a{

} কিন্তু sass এঁর মাধ্যমে আরও সহজ সুন্দর করে লেখা যায় ।

nav{ color:red; ul{ color:green; li{ color:orange; a{ color:green } a:hover{ color:red; } } } } এইভাবে নেস্টেড করে সিএসএস লেখা যায় sass এ ।

partials and sass settings create a new folder name by sass project

then create a folder named app into the sass project folder.

then create a js folder into the app folder named by SASS

then create a HTML file into the App folder. its a root file

then make HTML syntex to run webpage to the browser.

VS code settings (must be configured it)

Press command CTRL + Shift + P Command + Shift + P

then type open settings # then findout

#liveSass setup

"liveSassCompaile.settings.formats":[ { "format" : "compressed", "extensionName" : ".css", "savePath" : "/dist", --> এটা রুট ফাইল এ dsit নামে একটা ফাইল তৈরি করবে এবং এখানে css গুলো সত্যরে থাকবে । } ] ---> Settings এঁর কাজ শেষ --->then go to the scss folder and create a file named main.scss ---> than link css with HTMl <link rel="stylesheet" href="../dist/main.css" /> ---> এখন watch sass এ ক্লিক করলেই একটা dist নামে একটা ফাইল এবং main.css.map নামে ফোল্ডার থাকবে । now talk about the partials partialso হচ্ছে আপনার কোড কে separate করবে ছোট ছোট কিছু ফাইলের মাধ্যমে । সেটাকে আপনি পরবর্তীতে যে কোণ যায়গায় ব্যাবহার করতে পারবেন ।

যেহেতু সিএসএস এ reset code টা একটা কমন জিনিস তাই আপনি চাইলেই একটা আলাদা ফাইল এ রেখে যেকোনো সময় অ্যাক্সেস করতে পারবেন ।

ধরেন অনেক ডেভেলপার একটা প্রোজেক্টে কাজ করছে । এবং তারা আলাদা আলাদা ফাইলে কাজ করছে । এতে করে কি হবে ? কোড কনফ্লিক্ট হওয়ার সম্ভবনা নেই ।

then create a new folder under scss folder named untill. then create a new folder named base inside untill folder. then create a new file named -reset.scss (file name এঁর আগে - দেওয়ার কারণ হচ্ছে partials তৈরির জন্য সামনে underscore দিতে হয়) ।

• { margin: 0; padding: 0; outline: none; } untill folder এ কাজ sass tools, hyperfile, variable, function, mixin এইগুলো ষ্টোর করে রাখবে ।

এইভাবে আরও partials আপনি তৈরি করতে পারবেন ।

এখন partials এ থাকা সিএসএস গুলো আমরা কিভাবে ব্যাবহার করব ? ঠিক এভাবেঃ

main.scss এ যান । @forward "./base/reset"; ---> এখানে (-) underscore দেওয়ার প্রয়োজন নেই এবং extension ও দেওয়ার প্রয়োজন নেই

যখন আরো কোণ নতুন partials তৈরি করবেন । সেটা ব্যাবহার করার জন্য অবশ্যয় root sass file (main.scss) এ @frword এঁর মাধ্যমে অ্যাপ্লাই করতে হবে ।

যেটা বলেছিলাম নতুন partials তিরি করলে সেঁতা ব্যাবহারের জন্য root file এ গিয়ে @forword এঁর মাধ্যমে অ্যাপ্লাই করতে হবে । এটা একটা ঝামেলাপূর্ণ ব্যাপার । তাই এখন একটা সমাধান তৈরি করব । # যার জন্য base folder এঁর ভেতরে -index.scss নামে একটা ফাইল তৈরি করব এবং এখানে যত partials আছে সও গুলোকে অ্যাপ্লাই করব index.scss কে root style file (main.scss) এ অ্যাপ্লাই করব ।

lets talk about module প্রথমত until folder এ গিয়ে -variables.scss নামে একটা partials তৈরি করছি । এবং সেখানে কিছু variable assign করি । অ্যাপ্লাই করার জন্য এঁর ভেতরেই -index.scss নামে একটা partials তৈরি করব যেটা সব ডিজাইন কে অ্যাপ্লাই করতে সাহায্য করবে ,। তারপর আগের মতি শুধু -index.scss কে অ্যাপ্লাই করে দিব

কিন্তু এই অ্যাপ্লাই প্রচেসস টা একটু ভিন্ন । যেহেতু আমাদের শুধু অ্যাপ্লাই করে দিলেই হবে না । সেই variables গুলো স্থানভেদে ব্যাবহার করতে হবে ।

প্রচেস নিম্নরূপঃ go to main.scss @use "./until/index"; এখন headers এ যদি ব্যাবহার করতে চাই । তাহলে

header { background-color: index.$headerbg; } যদি এ variable নাম পরিবর্তন করতে চাই তাহলে নাম পরিবর্তন করা ছাড়াই তাহলে এই কাজটি করতে হবে

@use "./until/index" as variable; header { background-color: variable.$header; } @mixin and include what is mixin and include? a group of css declarations that can be reused throughout thestylesheets.

example: declarations part.

@mixin para-style{ font-size:16px; }

uses.

#about-me p { @include para-style } example এ আমরা কিছু সিএসএস অ্যাপ্লাই দেখলাম @mixin এবং @include এঁর মাধ্যমে । এখন আমরা dynamic ভাবে @mixin and @include এঁর ব্যাবহার করা শিখব । declarations: @mixin para-style($font,$margin){ font-size: $font; margin: $margin; } uses: #about > p{ @include para-style(18px,left) } #education > p{ @include para-style(50px,center) } @include and inheritance @extend এঁর মাধ্যমে আমরা একটি selector এঁর কিছু property অন্য একটি selector এঁর মধ্যে inharit করতে পারি

<button class="btn" />

<button class="btn2" /> /* <!-- css file এ --> */ .btn { background: red; color: black; } .btn2 { @extend .btn; } btn2 class এও btn এঁর সব ডিজাইন অ্যাপ্লাই হয়ে যাবে । extend করার পাশাপাশি আপনি চাইলে আরও css add করতে পারবেন । @if, @else, @else if declarations: @mixin font-size ($value){ @if $value ===small{ font-size : 10px; }@else if $value ===large{ font-size : 20px; }@else{ font-size :none; } } uses: a{ @include font-size(small) } Loop - For , while @for $i from 1 through 12{ do something } Real example @for $i from 1 through{ .col-#{$i}{ width : 100% / 12 * i } } @while example: $i : 1; @while $i < 10{ .col-#{$i}{ width : 100% / 10 * i } $i = $i + 1; } each: .red-text { color: red; } .green-text { color: green; } .blue-text { color: blue; }

@each $color in red, green, blue { #{$color}-text { color: $color; } } different ways to do it. <!-- firstly declare a variable --> $colors : {color1:red, color2:green, color3:blue};

@each $key $color in $colors{ #{$color}-text{ color: $color; } } References https://sass-lang.com https://w3school.com/sass https://www.codeacademy.com/learn/learn-sass