Design

Syntactically awesome style sheets

အားလံုးပဲမဂၤလာပါ

ကြၽန္ေတာ္ကေတာ့ ေမာင္ေအာင္ခန္႔ၿဖိဳး ျဖစ္ပါတယ္။
Spiceworks Myanmar Company မွာ Web Developer အျဖစ္ လုပ္ကိုင္ေနပါတယ္။
ယေန႕ Sass installing ႏွင့္ အသုံးျပဳပုံမ်ားကုိ ေလ့လာထားသေလာက္ ေဖာ္ျပေပးသြားမွာျဖစ္ပါတယ္။


  1. SASS ဖြင့္ဆုိခ်က္
  2. CSS ႏွင့္ SASS ျခားနားခ်က္
  3. Installing
  4. SASS အသုံးျပဳေရးသားခ်က္
  5. SCSS file အား watch ျပဳလုပ္ျခင္းျဖင့္ CSS File အျဖစ္ Compile ျပဳလုပ္ျပီးေရးသားခ်က္
  6. Sass Version စစ္ေဆးနည္း
  7. Sass Update ျပဳလုပ္နည္း
  8. Sample Code

1. Sass ဖြင့္ဆုိခ်က္

Sass သည္ Preprocessor Scripting Language တစ္ခုျဖစ္သည့္အျပင္ Cascading Style Sheets (CSS) file အျဖစ္လည္း Compile လုပ္ေပးႏုိင္သည့္ Scripting Language ျဖစ္ပါသည္။ Sass တြင္ Syntax ႏွစ္မ်ိဳးပါဝင္ပါသည္။ မူလ syntax အား “the indented syntax” ဟူ၍ ေခၚဆုိပါသည္။ Haml File Format တြင္ ရုိးရွင္းစြာ အသုံးျပဳသည့္ Syntax ျဖစ္ပါသည္။ ထုိ႕ေနာက္ Syntax အသစ္အား “SCSS” (Sassy CSS) ဟူ၍ ေခၚဆုိပါသည္။ CSS ကဲ့သုိ႕ ပုံစံခ်မႈမ်ားအတြက္ အသုံးျပဳပါသည္။

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.


2. CSS ႏွင့္ SASS ျခားနားခ်က္

Sass သည္ Css ထက္ပုိ၍အသုံးခ်ႏုိင္ျခင္း၊ Stable Code ေရးသားခ်က္မ်ား ေရးသားႏုိင္သည့္ CSS Extension ျဖစ္သည့္အတြက္ CSS Preprocessors ဟုလည္းေခၚဆုိပါသည္။

ကနဦးအစ CSS သည္ HTML File အတြင္း ေရးသားရသည့္ပုံစံျဖစ္ပါသည္။ Css Code မ်ားလာသည့္အခါ Html File ပမာဏလည္း တုိးပြားလာတတ္ပါသည္။ အကယ္၍ ျပန္လည္ျပင္ဆင္ေျပာင္းလဲလုိသည့္အခါ Select ျပဳလုပ္ထားေသာ Elementမ်ား Class ခ်ိတ္ဆက္မႈမ်ားအား ရွာေဖြကာ ျပင္ဆင္ေျပာင္းလဲရပါသည္။

အထက္စာပုိဒ္ပါ အေျခအေနကုိေျဖရွင္းဖုိ႕အတြက္ ထပ္မံ၍ HTML, CSS File မ်ားသီးျခား ခြဲထုတ္ကာ Module မ်ားသတ္မွတ္ျပဳလုပ္ျခင္းျဖင့္ ေျပာင္းလဲေရးသားခဲ့ၾကပါသည္။

ထုိ႕ေနာက္ပုိင္းတြင္ import ျပဳလုပ္ခ်က္၊ nesting, mixins ပုံစံ ေရးသားခ်က္၊ variables သတ္မွတ္ေရးသားခ်က္၊ partials, inheritance ပုံစံေရးသားခ်က္ စသည့္  CSS ထက္ပုိ၍ Powerful ျဖစ္ေသာ SASS အား အသုံးျပဳလာၾကပါသည္။

Sample CSS

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

Sample SCSS

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

3. Installing

3.1 ပထမဦးဆုံး https://rubyinstaller.org/downloads/ မွ ruby 2.5.3-1 (x64) အား Download ဆြဲပါ။

Ruby ဘာေၾကာင့္လုိအပ္သလဲ?

Sass သည္ Ruby Programming Language အေျခခံျပီး ျပဳလုပ္ထားေသာေၾကာင့္ Sass Run ႏုိင္ရန္ Ruby ကုိ ပထမဦးဆုံး Install လုပ္ထားရန္ လုိအပ္ပါသည္။

 

3.2 Command Line (CMD) ဖြင့္ပါ။

Command Line ဖြင့္ရန္ Windows Key + R function ျဖင့္ Run Box အား ဖြင့္ျပီး cmd ဟုရုိက္ထည့္ပါက ေအာက္ပါအတုိင္းေပၚလာပါမည္။

 

3.3 Command Line (CMD) တြင္ ေအာက္ပါအတုိင္း ရုိက္ထည့္ပါ။

     (directories ဘယ္ေနရာပဲေရာက္ေရာက္လုပ္ႏုိင္ပါသည္)

gem install sass

Gem ဘာေၾကာင့္လုိအပ္သလဲ?

Gem က ruby တြင္ Software သုိ႕ App မ်ား Run ႏုိင္ေအာင္ ျပဳလုပ္ေပးႏုိင္သည့္အရာျဖစ္ပါသည္။ Chrome, Firefox တြင္ Addon Installing ပုံစံနွင့္တူညီပါသည္။

Gem Installing Success ျဖစ္သြားပါက Command Line (CMD) တြင္ ေအာက္ပါအတုိင္း စာသားမ်ား ေပၚလာပါမည္။


4. SASS အသုံးျပဳေရးသားခ်က္

4.1 ပထမဦးဆုံး ေရးသားရန္ Folder ဖြဲ႕ပါ ( eg . SassSample)

 

4.2 SassSample အတြင္းတြင္ css, scss folder တည္ေဆာက္ေပးပါ။

 

4.3 scss folder အတြင္းတြင္ style.scss file တည္ေဆာက္ပါ။

 

4.4 Command Line (CMD) တြင္ လုပ္ေဆာင္ခ်က္ျပဳလုပ္နည္း

Command Line (CMD) တြင္ ေအာက္ပါအတုိင္း လက္ရွိ SassSample တည္ရွိိရာ Directories ေနရာသုိ႕ လမ္းညႊန္ပါ။


5. SCSS file အား watch ျပဳလုပ္ျခင္းျဖင့္ CSS File အျဖစ္ Compile ျပဳလုပ္ျပီးေရးသားခ်က္

5.1 /scss , /css folder မ်ားအား Sass “watch” ျပဳလုပ္ပါ။

sass --watch scss:css

“watch” command ဆုိတာ?

တကယ္ေတာ့ “watch” command သည္ “command” မဟုတ္ပါ။ “watch” ကုိ flag ဟုေခၚဆုိပါသည္။

“–watch” flag လုပ္ျခင္းသည္ /scss ႏွင့္ /css အတြင္းတြင္ရွိေသာ file ႏွစ္ခုကုိ “pay attention” ျပဳလုပ္ခ်က္ျဖစ္ပါသည္။ ဆုိလုိသည္မွာ မိမိေရးခ်င္ေသာ ပတ္ဝန္းက်င္ တြင္ SCSS file အား compile လုပ္ျပီးေနာက္ဆုံးတြင္ CSS file ထုတ္ေပးျခင္းျဖစ္ပါသည္။

“–watch” ျပဳလုပ္ထားပါက ေအာက္ပါအတုိင္း ေပၚေနမည္ ျဖစ္ပါသည္။

 

“watch” ျပဳလုပ္ထားသည့္အခ်ိန္တြင္ style.scss အားauto compile လုပ္ျပီး css folder အတြင္းတြင္ style.css အျဖစ္ auto တည္ေဆာက္ပါသည္။ style.scss အတြင္းတြင္ ေရးျပီး save လုပ္သည့္ code မ်ားကုိ လည္း style.css တြင္ css coding ပုံစံ အလုိအေလ်ာက္ေျပာင္းလဲေရးသားေပးပါသည္။

ယခုကၽြန္ေတာ့္ရွင္းျပခ်က္တြင္ ေနာက္ဆုံးထြက္လာသည့္ file css ကုိ အေျခခံထားသည္ကုိ ျမင္ေတြ႕ရပါမည္။
ဆုိလုိသည္မွာ cmd တြင္ “watch” ျပဳလုပ္ထားျပီး sass format ျဖင့္ ေရးသားကာ auto compile ထုတ္ေပးသည့္ css code file ကုိျပသလုိျခင္းျဖစ္ပါသည္။ 

***auto compile ျဖစ္ရန္ “sass –watch scss:css” ျဖင့္ run ထားရန္လုိအပ္ပါသည္။

“watch” run အေျခအေနကုိ ပိတ္လုိပါက cmd တြင္ ျပထားသည့္ Ctrl + C ျဖင့္ stop ျပဳလုပ္ျပီး y ရုိက္ထည့္၍ ပိတ္ႏုိင္ပါသည္။


6. Sass Version စစ္ေဆးနည္း

Command Line (CMD) တြင္ ေအာက္ပါအတုိင္း ရုိက္ထည့္ပါ

sass -v


7. Sass Update ျပဳလုပ္နည္း

Command Line (CMD) တြင္ ေအာက္ပါအတုိင္း ရုိက္ထည့္ပါ

gem update sass

8. Sample Code

Nesting

nav {
 ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 li { display: inline-block; }

 a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
 }
}

Import

reset.scss

// _reset.scss

html,
body,
ul,
ol {
 margin: 0;
 padding: 0;
}

base.scss

// base.scss

@import 'reset';

body {
 font: 100% Helvetica, sans-serif;
 background-color: #efefef;
}

Mixins

@mixin transform($property) {
 -webkit-transform: $property;
 -ms-transform: $property;
 transform: $property;
}

.box { @include transform(rotate(30deg)); }

Extend/Inheritance

%message-shared {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

.message {
 @extend %message-shared;
}

Operators

.container { width: 100%; }

article[role="main"] {
 float: left;
 width: 600px / 960px * 100%;
}

aside[role="complementary"] {
 float: right;
 width: 300px / 960px * 100%;
}

“အားလုံးပဲ သာယာေသာေန႕ရက္ေလးျဖစ္ပါေစ။

ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးအထူးတင္ပါတယ္ခင္ဗ်။“

Hello

Leave a Reply

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