SASS ၌ @extend ကိုအသုံးပြုသည့် ကွင်းဆက်တိုးချဲ့မှုများ
@extend ညွှန်ကြားချက်သည်
ကွင်းဆက် (သို့မဟုတ် အစဉ်လိုက်) တိုးချဲ့မှုကို ထောက်ပံ့ပေးသည်၊
ဆိုလိုသည်မှာ ရွေးချယ်တစ်ခုသည် အခြားရွေးချယ်တစ်ခုမှ
တိုးချဲ့နိုင်ပြီး၊ ထိုအခြားရွေးချယ်ကိုလည်း တတိယ
ရွေးချယ်တစ်ခုမှ တိုးချဲ့နိုင်ခြင်းဖြစ်သည်။ ဥပမာ-
ဥပမာတစ်ခုကို ကြည့်ရအောင်-
.warning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning {
@extend .warning;
border-width: 3px;
}
.systemWarning {
@extend .personalWarning;
position: center;
}
ကွန်ပလိုင်းရလဒ်မှ မြင်တွေ့ရသည့်အတိုင်း
.systemWarning ကလပ်စ်ရှိသော အစိတ်အပိုင်းအားလုံးတွင်
.warning နှင့်
.personalWarning ကလပ်စ်များ၏ စတိုင်များလည်း ပါဝင်နေသည်-
.warning, .personalWarning, .systemWarning {
border: 1px solid;
background-color: #ffd900;
}
.personalWarning, .systemWarning {
border-width: 3px;
}
.systemWarning {
position: center;
}
အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ရှင်းပြပါ-
div {
font-size: 10px;
color: #181402;
}
.main-block {
@extend div;
border: 2px solid orange;
}
#warning-text {
@extend .main-block;
margin-top: 10px;
}
အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ရှင်းပြပါ-
p {
padding: 10px;
}
.main-text {
font-weight: 800px;
}
.card {
@extend p;
color: #021338;
}
.product-card {
@extend .card, .main-text;
font-size: 12px;
}
အောက်ပါကုဒ်၏ ကွန်ပလိုင်းရလဒ်သည် မည်သို့ဖြစ်မည်ကို ရှင်းပြပါ-
p {
padding: 5px;
}
.main-text {
@extend p;
font-size: 14px;
}
.card {
@extend .main-text;
border: 1px solid black;
}
.product-card {
@extend .card;
background-color: #e1f1f1;
}