Design

SASS Fundamentals

အားလုံးပဲ မဂၤလာပါရွင့္။

ညီမကေတာ့ Spiceworks Myanmar မွာ Web Designer အေနနဲ႔ ဝင္ေရာက္လုပ္ကိုင္ေနတဲ့ ခင္ရတနာေအာင္ ျဖစ္ပါတယ္ရွင့္။ ဒီတစ္ပတ္မွာေတာ့ Sass ရဲ႕ primary features 5 မ်ိဳး အေၾကာင္းကို မွ်ေဝေပးခ်င္ပါတယ္ရွင့္။

SASS (Syntactically Awesome Style Sheets) ဆိုတာက scripting language တစ္မ်ိဳးျဖစ္ၿပီး CSS အတြက္ pre-processor အေနနဲ႔ ေဆာင္႐ြက္ပါတယ္။ CSS properties ေတြကို ထပ္တလဲလဲ ျပန္လည္ေရးသားရျခင္းမွ ေလ်ာ့နည္းေစၿပီး အခ်ိန္ကုန္သက္သာေအာင္ SASS ကို အသုံးျပဳျခင္း ျဖစ္ပါတယ္။

ဒီ Blog မွာ မွ်ေဝေပးမည့္ SASS ရဲ႕ primary features ေတြကေတာ့ Variables, Nesting, @mixin, Inheritance နဲ႔ Partials တို႔ဘဲ ျဖစ္ပါတယ္။

Variables

Stylesheet တစ္ေလွ်ာက္ ထပ္တလဲလဲ ျပန္လည္အသုံးျပဳမည့္ CSS properties ေတြရဲ႕ values ေတြကို variable အေနနဲ႔ ေၾကညာၿပီး အသုံးျပဳရျခင္း ျဖစ္ပါတယ္။ variable ကို “$variable_name” ပုံစံနဲ႔ ေၾကညာရပါမယ္။ ေၾကညာထားတဲ့ variable ကို ေအာက္တြင္ ေဖာ္ျပထားသလို အသုံးျပဳရပါမယ္။

Nesting

Nested rules ဆိုသည္မွာ parent selectors/elements ေတြကို nesting လုပ္ၿပီး styles ေတြ ေရးျခင္းျဖစ္ပါတယ္။ parent selectors ေတြကို “&” သေကၤတနဲ႔ ရည္ၫႊန္းၿပီး အသုံးျပဳလို႔ရပါတယ္။

@mixin

@mixin ဆိုသည္မွာ ျပန္လည္ အသုံးျပဳလို႔ရတဲ့ styles ေတြကို တစ္စုတစ္စည္းထဲ ေရးသားထားေသာ အစုအေဝး ျဖစ္ပါတယ္။ @mixin ေတြကို အသုံးျပဳခ်င္တဲ့အခါ @include ျဖင့္ ေခၚယူ ေရးသားပါတယ္။ @mixin မွာ parameters လက္ခံၿပီး အသုံးျပဳလို႔လည္း ရပါတယ္။ CSS property တူၿပီး value ေတြ မတူတဲ့အေျခအေနမ်ိဳးမွာ value ေတြကို mixin ရဲ႕ parameter မွာထည့္သြင္းေပးၿပီး values ေတြ ေျပာင္းလဲအသုံးျပဳႏိုင္ပါတယ္။

Inheritance
Selector တစ္ခုရဲ႕ CSS properties ေတြကို တျခား selectors ေတြကျပန္လည္အသုံးျပဳခ်င္တဲ့အခါမွာ @extend ကို သုံးၿပီး ေရးသားႏိုင္ပါတယ္။

Partials

Partial rule ဆိုသည္မွာ common styles ေတြကို partial scss file အေနနဲ႔ ခြဲျခားၿပီး စုစည္းအသုံးျပဳျခင္း ျဖစ္ပါတယ္။ Partial files ေတြကို နာမည္ေပးတဲ့အခါ “_filename” ပုံစံနဲ႔ ေပးရပါမယ္။ “_filename” နဲ႔ နာမည္ေပးမွသာ partial files အေနနဲ႔ သတ္မွတ္ၿပီး css file မထုတ္ေပးေတာ့မွာ ျဖစ္ပါတယ္။ Partial files ထဲက styles ေတြကို အျခားေသာ scss file မွာ @import နဲ႔ ေခၚၿပီး ျပန္လည္အသုံးျပဳလို႔ရပါတယ္။

အခုလို အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ရွင့္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *