Sass 与 BEM,继承选择器

2024-05-26

我正在使用 Sass 3.4.1 和 BEM 所以我的 scss 是:

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
}

我希望每次将鼠标悬停在.photo-of-the-day标题发生了一些事情,这很常见,所以通常在 css 中:

.photo-of-the-day:hover .photo-of-the-day--title{
    font-size:12px
}

事情是使用 BEM 这是我发现的唯一方法,看起来有点难看

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        /* this is ugly */
        .photo-of-the-day--title{
            text-decoration: underline;
        }
    }
}

所以我想知道我是否可以继承.photo-of-the-day选择器并在悬停中使用它以避免再次复制完整的选择器。

理想情况下会是这样的:

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        &&--title{
            text-decoration: underline;
        }
    }
}

或者接近 BEM 父选择器的回归。是否可以?


如果你坚持嵌套所有内容,你能做的最好的就是:

.photo-of-the-day {
    $root: &;
    &--title{
        font-size: 16px;
    }
    &:hover{
        #{$root}--title {
            text-decoration: underline;
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Sass 与 BEM,继承选择器 的相关文章

  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • Angular:如何动态更改 scss 变量?

    我对 scss 很陌生 所以我想知道是否可以使用组件的 Typescript 来更改 scss 变量 所以考虑一下 html div div scss thememode theme1 textcolormode nonHover colo
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点

随机推荐

  • java银行程序帐户ID不上去?

    每次创建银行帐户时 帐户 ID 都应增加 1 但每次我尝试提取 Id 时 我只会得到帐户 ID 为 0 任何建议 因为我完全按照我学习的书中的方式进行操作而且它仍然没有更新 帐户构造函数 public class BankAccount p
  • 如何从项目文件夹中的 jlabel 上设置图像?

    我正在尝试制作一个 Java 桌面应用程序 我想设置一个图像JLabel 我正在使用 NetBeans 从我的项目文件夹中 我的目录结构是 F gt MARKET src lib src defaultpackage demo java i
  • QT C++ QRegularExpression 多个匹配

    我想使用正则表达式从 QString html 中提取信息 我明确想使用正则表达式 无解析器解决方案 和类Q正则表达式 http qt project org doc qt 5 0 qtcore qregularexpression htm
  • 根据位置/日期更改日期选择器中的时间

    我在用着amsul 日期选择器和时间选择器 https amsul ca pickadate js time 我想根据选择的日期和复选框更改时间选择器的最小 最大小时 这是我的代码 var today new Date var tomorr
  • 将菜单添加到空活动

    我在 Android Studio 中制作了一个 Android 应用程序 并想在其上创建一个选项菜单 我将其创建为一个空活动 现在意识到我最好创建一个空白活动来获取选项菜单 无论如何 是否可以在空活动中创建选项菜单 如果有人能给我指出一个
  • 实时数据和草稿数据的数据库模型

    我一直在考虑在数据库中保存 实时 数据集和草稿数据集的最佳方法 实际版本会显示在网站上 草稿版本会一直进行下去 直到准备好上线为止 该模型是关系模型 由许多表组成 我目前的方法是拥有 2 个数据库 一个用于草稿 一个用于实时 当您将数据提升
  • 如何从 WPF 应用程序访问 Windows 文件预览图标

    我在一个目录中有一堆图片和视频 需要在WPF应用程序中显示 我正在考虑将Win7大图标本身显示为预览图像 因为这将节省我从视频文件中抓取适当帧的工作 因为 Windows 已经很好地完成了这项工作 有任何代码片段可以访问此 Shell 图标
  • 选择 matplotlib xticks 频率

    我正在用字符串作为 x 标签绘制数据 我想控制标签频率 以免文本使轴过载 在下面的示例中 我只想每 3 个刻度看到一个标签 a d g j 我可以做到这一点的一种方法是每 n 个元素用 2 个空字符串替换 my xticks 元素 但我确信
  • 我可以创建一个 List> 吗?

    我正在尝试创建一个列表WeakReference使用 4 5 泛型实现 这样我就可以避免类型检查和转换WeakReference目标 但 WeakReference
  • Windows PowerShell 查找文件中的重复行

    我需要使用 powershell 查找文本文件中的重复值 假设文件内容是 Apple Orange Banana Orange Orange 期望的输出应该是 Orange Orange 您还可以使用 Group Object cmdlet
  • 如何找到所有带有某种装饰的类?

    在Java中 我们可以使用 类路径扫描 找到具有给定注释的所有类 我们如何在 TypeScript 中做类似的事情 有没有办法找到所有装饰有某种装饰的类 这是一个例子 它假设您有某种方式引用范围 这magical类装饰器创建一个名为的字符串
  • Node.js 进程内存不足错误

    FATAL ERROR CALL AND RETRY 2 Allocation Failed process out of memory 我看到这个错误 但不太确定它来自哪里 我正在从事的项目有以下基本工作流程 从其他来源接收 XML 帖子
  • Xcode 6 Launchscreen.xib 具有适用于 iPad 横向和纵​​向的不同资源

    使用 Xcode 6 中引入的 LaunchScreen 我可以定义用于 iPad 横向和纵 向的不同资源吗 由于两个 iPad 方向的特征是相同的 遗憾的是 顺便说一句 我无法区分两者 这是否意味着 要么对 iPad 横向和纵 向使用相同
  • 我们可以在displaytag中使用rowspan和colspan吗?

    我必须创建一个表 其结构是这样的 col1 col2 col3 col4 col3 1 col3 2 是否可以使用显示标签创建这样的数据网格 查看装饰器示例 http displaytag sourceforge net 1 2 tut d
  • 除了前一个按钮意图之外,如何添加另一个按钮意图?

    这是我的代码 它包含一个名为的按钮button1A当我单击它时 它会打开一个名为的列表list1 如何为另一个名为 button2A 的按钮添加代码 该按钮将打开一个列表 List2 import android os Bundle imp
  • Django如何通过模板修改数据库记录

    我想删除我选择的记录 并且run html将会刷新 我该怎么做 由于我使用函数run在views py中发送数据库中的记录 以及run需要一个参数构建 可以通过使用获得run name 所以我认为当我单击提交按钮时 我需要传递 run na
  • 从 Python 脚本创建可执行文件,同时获取较小的输出大小

    我的问题可能已经在某个地方得到了解答 但我仍然找不到直接的答案 我想从 python 代码创建一个独立的可执行文件 我已经尝试过很多解决方案 例如py2exe pyinstaller等等 但我的问题是输出文件大小很大 例如 在pyinsta
  • Eclipse CDT C/C++:包含另一个项目的头文件

    我在 Eclipse CDT 中有两个 C 项目main and shared In shared我有一个名为calc h 我想在中使用这个标头main 所以我做了以下事情 added include calc h到相关文件main In
  • Android 中的定制数字时钟

    您好 我想以 HH mm AM PM 的格式在我的应用程序中显示时间 数字时钟还包括秒 即 HH mm ss 上午 下午 如何避免显示秒 有没有什么可行的办法 请帮助我 您必须克隆该文件DigitalClock java要在您的应用程序中使
  • Sass 与 BEM,继承选择器

    我正在使用 Sass 3 4 1 和 BEM 所以我的 scss 是 photo of the day title font size 16px 我希望每次将鼠标悬停在 photo of the day标题发生了一些事情 这很常见 所以通常