Making Responsive Design Easy with Sass Mixins – Spiceworks Myanmar

အားလုံးပဲ မင်္ဂလာပါခင်ဗျာ။
ကျွန်တော်ကတော့ Spiceworks Myanmar Company မှာ Web Designer အဖြစ် ဝင်ရောက်အလုပ်လုပ်ကိုင်နေတဲ့ ကျော်စိုးနိုင် ဖြစ်ပါတယ်။ ဒီတစ်ပတ်မှာတော့ Sass Mixins ကို အသုံးပြုပြီး VW unit, Percentage unit နှင့် Rem units တွေကို အလိုအလျောက် တွက်ချက်ပေးပုံနဲ့ ပတ်သက်ပြီး အသေးစိတ်ရှင်းပြပေးမှာ ဖြစ်ပါတယ်။
Sass က extensible CSS language ဖြစ်ပြီး mixins တွေကို ပြန်အသုံးပြုနိုင်တဲ့ style block တွေအဖြစ် သတ်မှတ်အသုံးပြုနိုင်တဲ့ CSS Preprocessor တစ်ခု ဖြစ်ပါတယ်။ Mixins ကို အသုံးပြုခြင်းအားဖြင့် တူညီတဲ့ style များကို များစွာသောနေရာများတွင် ပြန်လည်အသုံးပြုနိုင်ပါတယ်။ အထူးသဖြင့် Mixins သည် viewport width အပေါ်မူတည်ပြီး px တန်ဖိုးတွေကို VW unit အနေဖြင့် အလိုအလျောက် တွက်ချက်ပေးတာအပြင် parent element သို့မဟုတ် context width အပေါ်မူတည်ပြီး CSS တန်ဖိုးများကိုလည်း VW units ဖြင့် တွက်ချက်ပေးပါတယ်။
ဒါကြောင့် Mixins ကို large screen, medium screen နှင့် small screen စတဲ့ screen size အမျိုးမျိုးအတွက် Responsive Design ဖန်တီးရန် အသုံးပြုနိုင်ပါတယ်။

Sass ဆိုတာဘာလဲ
Sass ဆိုတာ CSS Preprocessor တစ်ခုဖြစ်ပါတယ်။ Web page တစ်ခုကို create လုပ်တဲ့အခါ ကျွန်တော်တို့အနေနဲ့ များပြားလှတဲ့ CSS styles တွေကို ရေးရတဲ့အခါမှာ ထပ်ခါထပ်ခါ ရေးနေရတဲ့ ဒုက္ခတွေကို ဖြေရှင်းဖို့ CSS Preprocessor တွေက အများကြီး အသုံးဝင်လာပါတယ်။ CSS Preprocessor ဆိုတဲ့အတိုင်း ရေးထားတဲ့ file တွေကို တိုက်ရိုက်ချိတ်ဆက်ပြီး သုံးရတာမဟုတ်ဘဲ Sass Preprocessor က compile လုပ်ပြီး ပြန်ထုတ်ပေးတဲ့ CSS ဖိုင်ကို ချိတ်ဆက်အသုံးပြုရမှာ ဖြစ်ပါတယ်။

Sass ကို ဘယ်လို Install လုပ်မလဲ
NPM ကို အသုံးပြုပြီး install လုပ်မှာဖြစ်တဲ့အတွက် မိမိ computer ထဲမှာ Node.js ဖြင့် install လုပ်ရပါမယ်။ Node.js install မလုပ်ရသေးဘူးဆိုရင် Get NPM တွင် Node ကို download ဆွဲပြီး install လုပ်နိုင်ပါတယ်။
1. Terminal သို့မဟုတ် Command Prompt ကို ဖွင့်ပါ။
2. အောက်ပါ command ကို ရိုက်ထည့်ပါ။

npm install sass -g 

sass install ပြုလုပ်ပြီးတဲ့အခါ version ကို အောက်ပါ command ကို ရိုက်ထည့်ပြီး စစ်ဆေးနိုင်ပါတယ်။

sass -v 

sass ကို css အဖြစ် compile လုပ်ချင်တဲ့အခါ watch mode ကို အသုံးပြုပြီး အောက်ပါ command ဖြင့် compile လုပ်နိုင်ပါတယ်။

sass --watch styles.scss:styles.css

Mixin ဆိုတာဘာလဲ
Mixin ဆိုတာ Sass ရဲ့ feature တစ်ခုဖြစ်ပြီး ပြန်လည်အသုံးပြုလို့ရတဲ့ styles တွေကို တစ်စုတစ်စည်းထဲ ရေးသားထားတဲ့ feature ဖြစ်ပါတယ်။ Mixin တွေကို အသုံးပြုချင်တဲ့အခါ @include ဖြင့် ခေါ်ယူရေးသားနိုင်သလို၊ CSS property တူပြီး value တွေမတူတဲ့အခြေအနေများမှာ value တွေကို mixin ရဲ့ parameter မှာ ထည့်သွင်းပေးပြီး values တွေကို ပြောင်းလဲအသုံးပြုနိုင်ပါတယ်။

Viewport Units
Viewport units (vw နှင့် vh) ဆိုတာ browser ၏ screen အရွယ်အစား ရာခိုင်နှုန်းကို ကိုယ်စားပြုသည့် unit များဖြစ်ပါတယ်။

1vw = 1% of the viewport’s width.
1vh = 1% of the viewport’s height.

Viewport Units အတွက် Mixin ကို ဘာလို့ အသုံးပြုသင့်တာလဲ
Sass mixin တစ်ခုက
1. Code တွေကို ထပ်ခါတလဲလဲ အသုံးပြုနိုင်အောင် လုပ်ပေးနိုင်ပါတယ်။
2. Layout တူညီတဲ့ style တွေအားလုံးကို တစ်ကြိမ်တည်းရေးပြီး လိုအပ်သလို ခေါ်ပြီး အသုံးပြုနိုင်ပါတယ်။
3. Pixel unit တွေကို viewport-relative unit အဖြစ် အစဥ်လိုက် ပြောင်းပေးနိုင်ပါတယ်။

Media Query mixins
Media Query Mixins ကို Sass မှာ responsive design အတွက် media queries များကို လွယ်ကူစွာ အသုံးပြုနိုင်စေရန် တည်ဆောက်ထားတဲ့ reusable code blocks များဖြစ်ပါတယ်။ မတူညီသော screen size များအတွက် CSS styles များကို ထည့်သွင်းနိုင်ရန် မိတ်ဆက်ပေးထားသော mixins အမျိုးအစားဖြစ်ပြီး အောက်တွင် media query mixins များအကြောင်းကို ထပ်ရှင်းပါမည်။

1. @mixin mobile

//scss mixin 
@mixin mobile {
    @media screen and (max-width: $mobile-max-width) {
        @content;
    }
}

Mobile devices (သို့မဟုတ်) $mobile-max-width ဧရိယာအတွင်းရှိ screen များအတွက် သီးသန့်အသုံးပြုနိုင်ရန်အတွက်ဖြစ်ပါတယ်။

//scss
$mobile-max-width: 767px;

SCSS ထဲမှာ အောက်ပါအတိုင်း @include ကို အသုံးပြု၍ ရေးသားနိုင်ပါတယ်။

//scss
@include mobile {
    body {
        font-size: 14px;
    }
}

Mobile device အတွက် SASS Preprocessor မှ compile လုပ်ပြီး ပြန်ထုတ်ပေးတဲ့ CSS format မှာ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

//css
@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }
}

2. @mixin tablet
Tablet devices သို့မဟုတ် $tablet-min-width နှင့် $tablet-max-width အတွင်းရှိ screen များအတွက် သီးသန့်အသုံးပြုနိုင်ရန်အတွက်ဖြစ်ပါတယ်။

//scss mixin
@mixin tablet {
    @media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
        @content;
    }
}

$tablet-min-width: 768px နှင့် $tablet-max-width: 979px လို့ သတ်မှတ်ထားလျှင် SCSS ထဲမှာ အောက်ပါအတိုင်း @include ကို အသုံးပြု၍ ရေးသားနိုင်ပါတယ်။

//scss 
@include tablet {
    body {
        font-size: 16px;
    }
}

Tablet device အတွက် SASS Preprocessor မှ compile လုပ်ပြီး ပြန်ထုတ်ပေးတဲ့ CSS format မှာ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

//css
@media screen and (min-width: 768px) and (max-width: 979px) {
    body {
        font-size: 16px;
    }
}

Sass မှာ Viewport Units (vw) ကို Automatic တွက်ချက်ခြင်း
Viewport Units (vw, vh) သည် responsive design တွင် အရေးပါသော unit ဖြစ်ပြီး screen size အပေါ်မူတည်၍ px တန်ဖိုးများကို တိတိကျကျ သတ်မှတ်အသုံးပြုနိုင်ပါတယ်။ Sass ကို အသုံးပြု၍ viewport units ကို automatic ရိုးရှင်းစွာ တွက်ချက်နိုင်ဖို့ function များကို ဖန်တီးနိုင်တဲ့အတွက် pixel values တွေကို viewport relative units (vw) သို့ ပြောင်းလဲအသုံးပြုနိုင်ပါတယ်။

Sass တွင် viewport units တွေကို automatic တွက်ချက်ဖို့အတွက် function နှစ်ခုကို ဖန်တီးထားပါမည်။
stripUnit Function:

@function stripUnit($value) {
    @return math.div($value, $value * 0 + 1); 
}

_get_vw Function:

@function _get_vw($pxValue, $viewport: $defaultViewportWidth) {
    $result: math.div(stripUnit($pxValue) * 100, stripUnit($viewport));
    @return #{$result}vw;
}

stripUnit function သည် တန်ဖိုးမှ unit ကိုဖယ်ရှားပြီး ပြန်လည် numeric value တစ်ခုကိုထုတ်ပေးပါမည်။
_get_vw function သည် pixel value ($pxValue) ကို 100 ဖြင့်မြှောက်ကာ viewport width ($viewport) နှင့်စားလိုက်မယ်ဆိုရင် vw အဖြစ် ပြန်လည်ထုတ်ပေးမည်။
အထက်ပါ function များသည် pixel values တွေကို viewport units (vw) သို့ ရိုးရှင်းစွာ ပြောင်းလဲရန် ကူညီပေးပါတယ်။

SCSS ထဲမှာ အောက်ပါအတိုင်း _get_vw ကို အသုံးပြု၍ ရေးသားနိုင်ပါတယ်။

//scss
$defaultViewportWidth: 1440px;

.element {
    width: _get_vw(200px);                                // 200px convert to vw 
    padding: _get_vw(30px) _get_vw(50px);  // 30px  50px convert to vw 
    font-size: _get_vw(16px);                           // 16px convert to vw 
}

SASS Preprocessor မှ compile လုပ်ပြီး ပြန်ထုတ်ပေးတဲ့ CSS format မှာ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

//css
.element {
    width: 13.89vw;                     // Equivalent of 200px
    padding: 2.08vw 3.47vw;    //  Equivalent of 30px 20px
    font-size: 1.11vw;                //  Equivalent of 16px 
}

Sass မှာ Viewport Units (%) ကို Automatic တွက်ချက်ခြင်း

//scss
@function _get_percentage($pxValue, $basewidth: $defaultBaseWidth) {
    $result: math.div(stripUnit($pxValue), stripUnit($basewidth)) * 100;
    @return $result * 1%;
}

stripUnit function သည် အထက်မှာ ရှင်းပြထားတဲ့အတိုင်း unit ကိုဖယ်ရှားပေးပြီး vw calcultion နှင့် လုပ်ဆောင်ချက်ခြင်းတူညီပါတယ်။
_get_percentage သည် Pixel value ကို base width အပေါ်မူတည်ပြီး percentage အဖြစ်ပြောင်းလဲ ပေး သော function ဖြစ်ပါတယ်။ ဒီမှာ math.div function က pixel value ကို base width နှင့်စားပြီး ရလဒ်ကို 100 ဖြင့်မြှောက်ကာ percentage ကိုထုတ်ပေးပါတယ်။

//scss
$defaultBaseWidth: 1440px;
.element {
    width: _get_percentage(300px,700px);                               
    padding-top: _get_percentage(30,640);
}

$defaultBaseWidth: 1440px သတ်မှတ်ထားသော်လည်း base width တန်ဖိုး 640px ကို parameter တစ်ခုအနေဖြင့် ပြောင်းလဲ သတ်မှတ်ပြီး အသုံးပြုလိုက်မယ်ဆိုလျှင် base width တန်ဖိုးပေါ်မူတည်၍ တန်ဖိုးကို ထုတ်ပေးပါတယ်။ Compile လုပ်ပြီး ပြန်ထုတ်ပေးတဲ့ CSS format မှာ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

//css
.element {
    width: 42.857%;                               
    padding-top: 4.688%;
}

Sass မှာ Viewport Units (Rem) ကို Automatic တွက်ချက်ခြင်း

//scss
@function _get_rem($pxValue) {
    @return math.div(stripUnit($pxValue), stripUnit($html-font-size)) + rem; 
}

stripUnit function သည် အထက်မှာ ရှင်းပြထားတဲ့အတိုင်း လုပ်ဆောင်ချက်တူညီပြီး _get_rem function သည် pixel (px) အရေအတွက်ကို rem unit သို့ ပြောင်းလဲရန် ဖန်တီးထားခြင်းဖြစ်ပါတယ်။ အများအားဖြင့် mobile responsive design အဖြစ် ပြောင်းလဲအသုံးပြုရာတွင်
အသုံးဝင်သော function တစ်ခုအနေဖြင့် $html-font-size အပေါ်မူတည်ပြီး rem unit ကို ပြောင်းလဲပေးသော function ဖြစ်ပါတယ်။

//scss
$html-font-size: 16px; 
.element {
    padding: _get_rem(20px); 
    margin: _get_rem(32px);  
    font-size: _get_rem(16px); 
}

SASS Preprocessor မှ compile လုပ်ပြီး ပြန်ထုတ်ပေးတဲ့ CSS format မှာ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

//css
.element {
  padding: 1.25rem;  
  margin: 2rem;      
  font-size: 1rem;   
}

Sass Mixins တွေကို အသုံးပြုပြီး VW unit, Percentage units နှင့် Rem unit တွေကို automatic ရိုးရှင်းစွာ တွက်ချက်နိုင်ဖို့ အသေးစိတ် ရှင်းပြပေးခဲ့တာ ဖြစ်ပါတယ်။ Web page များကို create လုပ်တဲ့အခါမှာ ဒီနည်းလမ်းကို နားလည်သဘောပေါက်ပြီး အသုံးချမယ်ဆိုလျှင် အချိန်ကို အများအပြား သက်သာစေပြီး ဖန်တီးမှု အချိန်ကို သိသိသာသာ လျော့ချနိုင်မှာ ဖြစ်ပါတယ်။
အားလုံးကိုကျေးဇူးတင်ပါတယ် ခင်ဗျ။