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