Sass ကို အသုံးပြု၍ တုံ့ပြန်မှုပုံစံပြုလုပ်ခြင်း။
Sass ဆိုတာဘာလဲ
Sass သည် CSS ကြိုတင်ပရိုဆက်ဆာတစ်ခုဖြစ်သည်။
Sass ဖိုင်များကို ဆာဗာပေါ်တွင် လုပ်ဆောင်ပြီး CSS ကို ဘရောက်ဆာထံ ပေးပို့သည်။
ကျွန်ုပ်တို့၏ Sass Tutorial တွင် Sass အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။
Sass ကို သုံးလို့ ရမလား။
သင့်ပရောဂျက်တွင် သင်အသုံးပြု create-react-appပါက၊ သင်၏ React ပရောဂျက်များတွင် Sass ကို အလွယ်တကူ ထည့်သွင်းအသုံးပြုနိုင်ပါသည်။
သင်၏ terminal တွင် ဤ command ကို run ခြင်းဖြင့် Sass ကို install လုပ်ပါ။
>npm i sass
ယခု သင့်ပရောဂျက်တွင် Sass ဖိုင်များကို ထည့်သွင်းရန် အဆင်သင့်ဖြစ်ပါပြီ။
Sass ဖိုင်တစ်ခုဖန်တီးပါ။
သင် CSS ဖိုင်များကိုဖန်တီးသကဲ့သို့ Sass ဖိုင်ကိုဖန်တီးသော်လည်း Sass ဖိုင်များတွင်ဖိုင် extension ရှိသည်။ .scss
Sass ဖိုင်များတွင် သင်သည် ကိန်းရှင်များနှင့် အခြား Sass လုပ်ဆောင်ချက်များကို အသုံးပြုနိုင်သည်။
my-sass.scss-
စာသား၏အရောင်ကိုသတ်မှတ်ရန် variable တစ်ခုဖန်တီးပါ-
$myColor: red;
h1 {
color: $myColor;
}CSS ဖိုင်ကို သင်တင်သွင်းသကဲ့သို့ Sass ဖိုင်ကို တင်သွင်းပါ-
index.js-
import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));