နိဒါန်း
အပိုင်း (၁) မှာတုန်းက SASS ကို Install လုပ်တဲ့နည်းတွေ၊ ရေးနည်းတွေ၊ Variable အကြောင်းတွေကို ရှင်းပြခဲ့ပါတယ်။ ကဲ ဒီတော့၊ ဒုတိယပိုင်းကို ဆက်လိုက်ရအောင် ...
Nesting
Nesting ဆိုတာကတော့ ကျွန်တော်တို့ ရေးနေကြ ပုံစံအတိုင်း CSS က Nav>ul>li စသည်ဖြင့် ဆက်စပ်မှုတွေရဲ့ ပုံစံအတိုင်း ရေးသားတဲ့ ပုံစံပါပဲ။
အဓိကကတော့ Tab ခုန်ပြီး ရေးသွားတဲ့ ပုံစံပါ။ အဲဒီလို ရေးလိုက်မယ်ဆိုရင် အောက်မှာ ပြထားတဲ့အတိုင်း CSS ကို Generate ထုတ်ပေးပါလိမ့်မယ်။
Partials
Partial ကတော့ SASS တွေကို အပိုင်းပိုင်းဖြတ်ပြီး ရေးချင်တဲ့အခါမှာ အများကြီး အသုံးဝင်ပါတယ်။ Nav အတွက် sass တစ်ဖိုင်၊ header အတွက် sass တစ်ဖိုင် စသည်ဖြင့် ခွဲခြားပြီး ရေးချင်တဲ့အခါ Partial ကို သုံးလို့ရပါတယ်။ အဲဒီလို Partial ကို သုံးဖို့ File တွေရဲ့ ရှေ့မှာ Underscore ထည့်ပေးဖို့ လိုပါတယ်။
ဥပမာ - _header.sass, _nav.sass စသည်ဖြင့်ပေါ့။ အဲဒီလို Underscore နဲ့ စတဲ့ File တွေကို SASS က CSS မပြောင်းပေးပါဘူး။ ကိုယ်ခေါ်လိုတဲ့ နေရာကခေါ်မှသာ ပေါင်းပြီး CSS ပြောင်းပေးပါတယ်။
ကျွန်တော်တို့ Project မှာ _nav.sass ဆိုပြီး ခွဲထုတ်လိုက်ပါတယ်။
အဲဒီလို ခွဲထုတ်ပြီး ကျွန်တော်တို့ Main CSS ဖြစ်တဲ့ style.sass ကနေ @import nav ဆိုပြီး ပြန်ခေါ်လိုက်ပါတယ်။ Partial နဲ့ရေးတာဟာ ကျွန်တော်တို့ Application အကြီးကြီးတွေကို Module တွေ ခွဲပြီး ရေးတဲ့အခါမှာလဲ အများကြီး အသုံးဝင်ပါတယ်။
Import
Import ကို ကျွန်တော်တို့ အပေါ်မှာ သုံးခဲ့ပြီးသားပါ။ @import ကို သုံးတဲ့အခါမှာ မူလ CSS မှာ သုံးတဲ့ ပုံစံအတိုင်းလဲ သုံးလို့ရသလို SASS ကလဲ သူ့ပုံစံတစ်ခုနဲ့ အထောက်အပံ့ပေးပါတယ်။ @import လို့ ပြောလိုက်တာနဲ့ CSS ကို Generate ထုတ်တဲ့အခါ တစ်ဖိုင်တည်း ဖြစ်အောင် ပေါင်းပေးလိုက်ပါတယ်။
Mixins
Mixins ကတော့ SASS မှာ ကျွန်တော် အကြိုက်ဆုံး Feature တစ်ခုပါ။ CSS တွေ ရေးရတဲ့အခါ စိတ်အပျက်ဆုံး အပိုင်းကို ပြောပါဆိုရင် border-radius လို ဟာတွေ ရေးရတဲ့အခါပါ။ W3C ရဲ့ Standard အရ border-radius ဟာ border-radius လို့ ရေးရင်ပြီးပေမယ့် အရင် Browser အဟောင်းတွေမှာ ကိုယ့်လှေကိုယ်ထိုးခဲ့ကြတဲ့ အခြေအနေတွေ ရှိပါတယ်။
အဲဒီအတွက် border radius ကို သတ်မှတ်တော့မယ်ဆိုရင်
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
border-radius: 5px
ဆိုပြီး လေးခုလောက် ရေးပေးရတတ်ပါတယ်။ SASS မှာတော့ Mixins အကူအညီနဲ့ အဲဒီလို ရေးရတာတွေကို အလွယ်တကူ ဖြေရှင်းနိုင်ပါတယ်။
Mixins ကို ရေးတဲ့အခါ = နဲ့ စပြီး ရေးရပါတယ်။ ပြီးရင် ကိုယ်ခေါ်သုံးလိုက်တဲ့ Keyword ကို ရေးပေးရပါတယ်။ အဲဒီ Keyword ရဲ့နောက်မှာ ( ) နဲ့ Varaible ကို Pass ပေးရပါတယ်။ အဲဒီလို Pass ပေးလိုက်တဲ့ Variable တွေက တစ်ဆင့် သက်ဆိုင်ရာ border-radius တွေမှာ Assign လုပ်သွားပါတယ်။
Extend/Inheritance
SASS မှာ အသုံးအဝင်ဆုံး Feature ကို ပြပါဆိုရင် Extend/Inheritance လုပ်နိုင်တဲ့ Feature ပဲ ဖြစ်ပါတယ်။ သူကလဲ Mixins လိုပဲ CSS ရေးရတဲ့ WorkLoad ကို လျော့ချပေးတာပါပဲ။ ကျွန်တော်တို့ နမူနာလေးနဲ့ ကြည့်ကြည့်ရအောင်ဗျ။
index.html
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS BOX</title> | |
| <link rel="stylesheet" href="css/reset.css"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </nav> | |
| <div id="container"> | |
| <div class="box"> | |
| <p>A</p> | |
| <button class="btn-red">Click Me</button> | |
| </div> | |
| <div class="box"> | |
| <p>B</p> | |
| <p class="message error">This is error message</p> | |
| </div> | |
| <div class="box"> | |
| <p>C</p> | |
| <p class="message success">This is success message</p> | |
| </div> | |
| <div class="box"> | |
| <p>D</p> | |
| <p class="message warning">This is warning message</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
_nav.sass
style.sass
| @import url('https://fonts.googleapis.com/css?family=Just+Another+Hand|Slabo+27px') | |
| $f-stack-one: 'Just Another Hand', cursive | |
| $f-stach-two: 'Slabo 27px', serif | |
| $body-color: #111 | |
| $body-line-height: 1.2 | |
| $main-width: 1080px | |
| $white_color_100: rgba(255,255,255,1) | |
| =border-radius($radius) | |
| -webkit-border-radius: $radius | |
| -moz-border-radius: $radius | |
| border-radius: $radius | |
| body | |
| font-family: $f-stach-two | |
| color: $body-color | |
| line-height: $body-line-height | |
| #container | |
| width: $main-width | |
| margin: 0 auto | |
| margin-top: 20px | |
| display: flex | |
| .box | |
| width: 213px | |
| height: 150px | |
| float: left | |
| padding: 20px | |
| background: #E3F2FD | |
| border: 1px solid #e3e3e3 | |
| .box p | |
| text-align: center | |
| @import nav | |
| .btn-red | |
| +border-radius(5px) | |
| font-family: $f-stach-two | |
| font-size: 13px | |
| text-transform: uppercase | |
| color: $white_color_100 | |
| background: #e84545 | |
| text-decoration: none | |
| padding: 20px 55px | |
| .btn-red:hover | |
| background: #ff0000 | |
| text-decoration: none | |
| .message | |
| border: 1px solid #ccc | |
| padding: 10px | |
| color: #333 | |
| .success | |
| @extend .message | |
| border-color: green | |
| .error | |
| @extend .message | |
| border-color: red | |
| .warning | |
| @extend .message | |
| border-color: yellow | |
ကျွန်တော်တို့ ရေးထားတဲ့ Project file မှာ .message အနေနဲ့ extend/inheritance ကို သုံးပြထားပါတယ်။
ဒီပုံကိုကြည့်မယ်ဆိုရင် Extend/Inheritance က ဘယ်လောက်အထိ အသုံးဝင်မယ်ဆိုတာ သိနိုင်ပါတယ်။ အားလုံးတူညီနေတဲ့ css တွေကို အပေါ်မှာ ရေးပြီး ကျန်တာတွေကို @extend လုပ်ပြီး ရေးသွားနိုင်ပါတယ်။
Operators
SASS မှာ နောက်ထပ် ကျွန်တော် အကြိုက်ဆုံး Feature တစ်ခုကတော့ Operators တွေပါ။ ကျွန်တော်တို့ HTML & CSS တွေ ရေးတဲ့အခါ Width တွေ တွက်ရတဲ့အခါ စိတ်ပျက်စရာ အင်မတန်ကောင်းပါတယ်။ ပေါင်းနှုတ်မြှောက်စားတွေ အကုန်ရပါတယ်။
ဥပမာ အနေနဲ့ Container တစ်ခုထဲမှာ Box လေးခု ရှိတယ်ဆိုပါစို့။ အားလုံးကို အညီအမျှ ခွဲမယ်ဆိုရင် ...
style.sass မှာတော့ ဒီလိုပုံစံမျိုး ရေးပါမယ်။
width: (($main-width - 60px) / 4) - 22px ဆိုတာ Operator တွေ သုံးပြီး တွက်ချက်ထားတာ ဖြစ်ပါတယ်။
နိဂုံး
SASS ကို အသုံးပြုမယ်ဆိုရင် စကတည်းက သုံးတာ ကောင်းပါတယ်။ CSS ရေးပြီးမှ SASS ပြန်ပြောင်းမယ်ဆိုရင် အရမ်းအလုပ်ရှုပ်ပါတယ်။ SASS ကို သုံးပြီးရေးမယ်ဆိုရင် နောက်ထပ် ရလာနိုင်တဲ့ အခွင့်အရေးတစ်ခုက CSS ကို စနစ်တကျ ရေးတတ်တာပါ။ ဆက်လက်ရေးသား သွားပါဦးမည် ...
Join Us On