Sass control directives part1 if ادوات الشرط

Advanced sass if else-arabic-html

Sass control directives @if

اذا كنت من محبين التعامل مع Sass – scss فهذا يدل انك من محبين البرمجة الحديثة كود اقل بامكانية اكبر ممن يسهل علينا التعامل مع القالب بكل مرونة و هنا سنتحدث على ادات الشرط

SASS – Scss شرح فيديو

شكل مبسط اذا كان الشرط صحيح

Arabic HTML

$condition: true !default; 

@if $condition == true {
  p{
    color: red;
  }
}

اذا كان الشرط مساوي لمتغير معين

$condition: arty;
p {
  @if $condition == romantic {
    color: blue;
  } @else if $condition == classic {
    color: red;
  } @else if $condition == arty {
    color: green;
  } @else {
    color: black;
  }
}

p{ color: green }

شكل اخر لادوات الشرط و كيفية استخدمها

@mixin item-styles($condition){
	$color: if($condition, green, blue);
	
	p{ color: $color }
}

@include item-styles(true);
//p{ color: blue }

@media screen and (min-width: 650px){
	@include item-styles(false);
	//p{ color: green }
}
  • HTML-CSS
  • css3 sass scss