@if判断

你可能早已知晓，Sass 通过 @if 和 @else 指令提供了条件语句。除非你的代码中有偏复杂的逻辑，否则没必要在日常开发的样式表中使用条件语句。实际上，条件语句主要适用于库和框架。

无论何时，如果你感觉需要它们，请遵守下述准则：

• 除非必要，不然不需要括号；
• 务必在 @if 之前添加空行；
• 务必在左开大括号( { )后换行；
• @else 语句和它前面的右闭大括号( } )写在同一行；
• 务必在右闭大括号( } )后添加空行，除非下一行还是右闭大括号( } )，那么就在最后一个右闭大括号( } )后添加空行。

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

编译生成:

p {
  border: 1px solid; }

@if @else结合使用方法

p{
    @if 1+1==2{
       width:30px;
    }@else{
       width:100px;
    }
}

编译生成:

p{
    width:30px;}