BEM与SASS和:悬停

Question

使用BASS和SASS声明活动/聚焦/悬停状态的正确方法是什么？例如,我有这样的结构:

<div class="card">
    <img class="card__image" src="..." alt="">
    <div class="card__overlay">
        <div class="card__title"></div>
    </div>
</div>    

和SCSS:

.card {
   &__image {
   }

   &__overlay {
   }

   &__title {
   }
}

我想在悬停在块上时修改元素.这不起作用:

.card {
   &__overlay {
       display: none;
   }

   &:hover {
       &__overlay {
           display: block;
       }
   }
}

并且必须.project__image为这一个实例编写整体似乎是错误的.

有没有其他方法可以实现这一目标？

Answer 1

您可以使用Sass&符号选择器获得所需的结果,而无需使用变量或插值.

如果正确使用,使用&符号(&)引用父选择器可以是一个强大的工具.此功能有一些简单的用途,以及此功能的一些非常复杂的用途.

例如:

.card { 

    &__overlay {
        display:none;
    }

    &:hover & {
        &__overlay  {
            display: block;
        }   
    }
}

结果是:

.card__overlay {
    display: none;
}

.card:hover .card__overlay {
    display: block;
}

此代码使用较少的语言结构(例如,不使用变量或插值),因此可以说是更清晰的实现.

Answer 2

阅读有关插值的更多信息:http: //sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

SCSS:

.card {
    $root: &;

    &__overlay {
        display: none;

        #{$root}:hover & {
            display: block;
        }
    }
}

结果:

.card__overlay {
  display: none;
}

.card:hover .card__overlay {
  display: block;
}

PS.它类似于@alireza safian post,但是通过这种方式,您不需要复制类名.变量$root为你做:)

Answer 3

替代方式：

对于第三级，使用变量而不是 & 符号。

关联

SAS：

$className: card;
.card {
   &__overlay {
       display: none;
   }

   &:hover {

       .#{$className}__overlay {
           display: block;
       }
   }
}

CSS：

.card__overlay {
  display: none;
}

.card:hover .card__overlay {
  display: block;
}