条件分岐で必要のないプロパティは書き込まない。

css scss sass

ボックスサイズを指定するキープロパティは

  • height(高さ)
  • widht(横幅)
  • padding(内部余白)
  • margin(外部余白)

ですが、ミックスインで複数の引数を指定すれば記述は楽になりますが、
この4つをその都度全て書き込んでしまうため、結果的にコードが重くなってしまいます。


そこで書き込む必要のないプロパティの引数にのみ"null"指定して書き込ませない様にします。


sass

@mixin boxLayout($width:null,$height:null,$margin:null,$padding:null){
 width: $width;
 height: $height;
 margin: $margin;
 padding: $padding;
}

section.box{
 @include boxLayout(80px,80px,null,20px)
}



css(コンパイル後)

section.box {
  width: 80px;
  height: 80px;
  padding: 20px;
}