sass - 如何在 sass/scss 中使用 @if 条件 && 条件

Question

我需要使用这个循环/条件：

@for $i from 1 to 6 {
    @if $i == 1 {
        /* ..... */           
    }@else if $i > 1 && $i < 6 {
        /* ..... */ 
    }@else if $i == 6{
        /* ..... */
    }
 }

但是“&&”在 Sass/Scss 中不起作用……知道吗？

然后我尝试了这个：

 @for $i from 1 to 6 {
    @if $i == 1 {
        /* ..... */           
    }@else if $i > 1 {
        /* ..... */ 
    }@else if $i > 5{
        /* ..... */
    }
 }

但是最后一个“@else if”不起作用！

Answer 1

您想and在 Sass 中使用关键字而不是&&（而or不是||）：

@for $i from 1 to 6 {
    @if $i == 1 {
        /* ..... */           
    }@else if $i > 1 and $i < 6 {
        /* ..... */ 
    }@else if $i == 6{
        /* ..... */
    }
}

不过，您的代码会像这样更有意义：

/* ..... */ // first          
@for $i from 2 through 5 {
    /* ..... */ 
 }
/* ..... */ // sixth

X to Y注意循环和循环之间的区别X through Y： 通过包含 Y，排除Y。

Answer 2

有用 ：

 @for $i from 1 to 6 {
   @if $i == 1 {
       /* ..... */           
   }@else if $i < 5 {
       /* ..... */ 
   }@else {
       /* ..... */
   }
 }