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 ampersand selector获得所需的结果，而无需使用变量或插值。

使用＆符号（＆amp;）引用父选择器可以是a 强大的工具，如果使用得当。这个功能有简单的用法以及此功能的一些非常复杂的用途。

例如：

.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

替代方式：

使用变量代替＆符号作为第三级。

Link

SASS：

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

   &:hover {

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

CSS：

.card__overlay {
  display: none;
}

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

BEM与SASS和：悬停

3 个答案: