SASS ရှိ သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်များ

SASS ဘာသာစကားတွင် ကိန်းရှင်များနှင့် တန်ဖိုးအမျိုးမျိုးအပေါ် သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်ပါသည်။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

တန်ဖိုးနှစ်ခုကို ပေါင်းကြည့်ပါမည်။

styles.scssp {
  font-size: 5px + 10px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssp {
  font-size: 15px;
}

တစ်ခုသော တန်ဖိုးမှ အခြားတစ်ခုကို နုတ်ကြည့်ပါမည်။

styles.scssp {
  font-size: 25px - 10px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssp {
  font-size: 15px;
}

တန်ဖိုးကို ကိန်းတစ်ခုဖြင့် မြှောက်ကြည့်ပါမည်။

styles.scssp {
  font-size: 5px * 5;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssp {
  font-size: 25px;
}

တန်ဖိုးကို ကိန်းတစ်ခုဖြင့် စားကြည့်ပါမည်။

styles.scssdiv {
  width: 100% / 3;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssdiv {
  width: 33.33333333%;
}

ကိန်းရှင်၏ အကြောင်းအရာသို့ တန်ဖိုးတစ်ခုကို ပေါင်းထည့်ကြည့်ပါမည်။

styles.scss$var: 100px;

div {
  width: $var + 100px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssdiv {
  width: 200px;
}

ကိန်းရှင် နှစ်ခုကို ပေါင်းကြည့်ပါမည်။

styles.scss$var1: 100px;
$var2: 200px;

div {
  width: $var1 + $var2;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssdiv {
  width: 300px;
}

ယူနစ်အမျိုးမျိုးဖြင့် လုပ်ဆောင်ချက်ကို ကြိုးစားသောအခါ SCSS သည် ယူနစ်အားလုံးကို တစ်ခုတည်းသို့ - ပထမဆုံးယူနစ်သို့ ပြောင်းလဲပေးပါသည်။ ဥပမာ။

styles.scssdiv {
  width: 100% - 10px;
}

အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်။

styles.cssdiv {
  width: 90%;
}

Задание 1

အောက်ပါကုဒ်၏ အပြန်အလှန်ဖွဲ့စည်းခြင်း ရလဒ်သည် မည်သို့ဖြစ်မည်ကို ရှင်းပြပါ။

styles.scss#block {
  width: 100px * 2;
}

Задание 2

styles.scss#block {
  width: 200px / 3;
}

Задание 3

styles.scss$var1: 500px;
$var2: 5;

#block {
  width: $var1 / $var2;
}