CSS၊ SCSS နှင့် SASS တွေရဲ့ ခြားနားမှု

CSS ဆိုတာ Web Developer တွေနှင့် အကျွမ်းတဝင်ရှိပြီးသား Cascading Style Sheets လို့ခေါ်တဲ့ Web Browser နားလည်ပြီး၊ Web Page တွေရဲ့ အသွင်အပြင် ပုံစံတွေ (Color, Font, etc.,) ကို ပြောင်းလဲ၊ ပြင်ဆင်ရန် အသုံးပြုတဲ့ Style Sheet Language ဖြစ်တယ်။  SCSS ဆိုတာကြတော့ SASS မှာသုံးတဲ့ ဖိုင်အမျိုးအစား တစ်ခုဖြစ်ပြီး သူက CSS နှင့်ဆင်တူတယ်။ မတူတာက SCSS နှင့် SASS ဟာ တကယ့် Programming Language တစ်ခုပုံစံမျိုး ရေးလို့ရတဲ့ Script Style Sheet Language ဖြစ်တယ်။ ဥပမာ Variable တွေကြော်ငြာပြီး အလုပ်လုပ်တာမျိုး၊ Looping ပုံစံမျိုး စတာတွေ ရေးလို့ရတယ်။  နောက်ပြီး သူကနေ အလုပ်လုပ်ပြီး ထွက်လာတဲ့ Result ဟာ CSS အနေနှင့် Interpret လုပ်ပေးတယ်။  CSS ဖိုင်ကို SCSS အနေနှင့် သုံးလို့လည်းရတယ်။  CSS ဖိုင်ရဲ့ Extension (.css) ကို (.scss) လို့ ပြောင်းလိုက်ရုံနှင့် SCSS ဖိုင်အနေနှင့် သုံးလို့ရတယ်။  SASS ကကြတော့ Syntactically Awesome Stylesheets လို့ခေါ်ပြီး၊ သူ့က SCSS ထက်ပိုကောင်းအောင်၊ လွယ်အောင်၊ မြန်အောင် ဖန်တီးထားတဲ့ Script Style Sheet Language ဖြစ်တယ်။  Ruby လိုမျိုး Programming Language မှာ CSS ရဲ့ လုပ်ဆောင်ချက်တွေအတွက် SCSS (သို့) SASS ကို အသုံးပြုကြတယ်။ သူတို့ရဲ့ အလုပ်လုပ်ပုံက SCSS (သို့) SASS နှင့် ရေးထားတဲ့ Code တွေကို Web Server ကနေ အလုပ်လုပ်ပြီး CSS အနေနှင့် Browser ကိုထုတ်ပေးတယ်၊ ပြီးတော့ CSS အနေနှင့် အလုပ်လုပ်တာပဲ ဖြစ်တယ်။  ဥပမာ အားဖြင့် တစ်ခုခြင်းစီ ခြားနားပုံကို အောက်ပါအတိုင်း တွေ့နိုင်တယ်။

CSS နမူနာ:

#header {
margin: 0;
border: 1px solid red;
}
#header p {
font-size: 12px;
font-weight: bold;
color: red;
}

#header a {
text-decoration: none;
}

SCSS နမူနာ:

$colorRed: red;
#header {
margin: 0;
border: 1px solid $colorRed;
p {
color: $colorRed;
font: {
size: 12px;
weight: bold;
}
}

a {
text-decoration: none;
}

}

SASS နမူနာ:

$colorRed: red
#header
margin: 0
border: 1px solid $colorRed
p
color: $colorRed
font:
size: 12px
weight: bold

a
text-decoration: none

အကယ်၍ Web Design ပိုင်းကို စိတ်ဝင်စားတဲ့သူတွေအနေနှင့် သမရိုးကျ CSS ကုဒ်တွေကို အချိန်ကြာကြီးရေးနေမယ့်အစား SASS နှင့်ရေးရင် ပိုပြီးစိတ်ဝင်စားစရာ ကောင်းသလို လုပ်ငန်းလည်းတွင်ကျယ်ပါလိမ့်မယ်။  Online ကနေ SCSS/SASS ကိုရေးကြည့်မယ်ဆိုရင် SassMeister မှာရေးလို့ရပါတယ်။  ရေးပြီးတဲ့ Sass/Scss Code တွေကို တခါတည်း Css အဖြစ် Complie လုပ်ပေးပါတယ်။

အခြားလေ့လာနိုင်တဲ့ Links:
http://sass-lang.com
https://www.nosegraze.com/goodbye-css-hello-scss

အပြည့်အစုံ ဖတ်မယ်...

Print CSS ဖိုင်တည်ဆောက်ခြင်း

Website တစ်ခုမှာရှိတဲ့ Webpage ‌တွေကို Print ထုတ်ချင်တဲ့အခါမှာ User ‌တွေအ‌နေနှင့် printscreen ဖမ်းပြီးထုတ်တာ ရှိသလို Browser ရဲ့ Print Command ကိုသုံးပြီးထုတ်တာလည်းရှိပါတယ်။  Printscreen ဖမ်းပြီးထုတ်တာဟာ Webpage မှာမြင်ရတဲ့ အတိုင်းလိုချင်လို့ပါ။  ဒါ‌ပေမယ့် တစ်ချို့ Webpage ‌တွေအတွက် အဆင်‌ေပြပြီး တစ်ချို့ Webpage ‌တွေအတွက် အဆင်မ‌ေပြတဲ့အခါ Print Command နဲ့ထုတ်ကြပါတယ်။  သို့‌သော် Website တစ်ခုဟာ ကျွန်‌တော်တို့သိတဲ့အတိုင်း css, jquery, etc စ‌သော script code ‌တွေနှင့်‌ပေါင်းစပ် ဖွဲ့စည်းထားပါတယ်။  Print Command နဲ့ Print မထုတ်ခင် Print Preview ကြည့်တဲ့အခါ အဲ့ဒီ script codeတွေကြောင့် Webpage မှာမြင်ရတဲ့အတိုင်း မ‌ပေါ်ပါဘူး ကျွန်‌တော်တို့ထုတ်မယ့် Webpage ရဲ့တစ်ချို့ ကိုယ်လိုချင်တဲ့ စာသား‌တွေကို ဖုံး‌နေတာ၊ ထပ်‌နေတာ စတာ‌တွေဖြစ်‌နေတတ်ပါတယ်။  အဲ့ဒီ‌တော့ Webpage မှာမလိုအပ်တာ‌တွေကို ဖြုတ်ပြီး လိုအပ်တာ‌တွေကို Print ထုတ်တဲ့အခါ ရှင်းရှင်းလင်းလင်း ဖြစ်‌စေဖို့ user-friendly format ဖြစ်‌စေမယ့် css ဖိုင်တစ်ခု ဖန်တီးထားရပါ့မယ်။  အဲ့ဒီ css ဖိုင်တည်‌ဆောက်ဖို့ မခက်ပါဘူး သာမာန် css ဖိုင်တည်‌ဆောက်သလိုပါပဲ။  ဒီ print format ချ‌ပေးမယ့် css ဖိုင်ကို ပုံမှန် css ဖိုင်ကို ‌ခေါ်ထည့်သလို Webpage မှာခုလို ထည့်ပါတယ်။  ဒီ css ဖိုင်ကို တခြား css ဖိုင်‌တွေ အားလုံးရဲ့‌နောက်ဆုံးမှာ ထည့်သွင်းရပါမယ်။

အပြည့်အစုံ ဖတ်မယ်...