SASS 中选择器末尾和一部分的与号 (&)

2023-11-29

我有一个正在努力解决的问题。 我有这个 mixin (这是尝试将一些 less 移植到 sass ):

@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

这显然不起作用:D 我希望它生成类似的东西:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

mixin 在各种 div 类中调用,因此不可能(轻松)使其静态。

某些 Sass 专业人士(或不是专业人士,但比我聪明)有任何解决方法吗? 感谢大家的关注并分享您的解决方案。


对于 Sass 3.2 及更早版本,以下是使用父选择器的所有有效方法:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

.foo {
    .bar & {
        color: red;
    }
}

从 Sass 3.3 开始,这是有效的:

.foo {
    &bar, &-bar {
        color: red;
    }
}

从 Sass 3.4 开始,这是有效的:

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SASS 中选择器末尾和一部分的与号 (&) 的相关文章

  • 如何在滚动时保持这些 tagHover 的位置靠近标签并且 tagHover 具有固定位置?

    https plnkr co edit PuP3f71kCjkqgjjMkgNS p preview https plnkr co edit PuP3f71kCjkqgjjMkgNS p preview 下面还有一个 stackoverfl
  • CSS 变换源不能与 translate() 一起使用

    我想将 div 从中心点移开 但似乎translate 不关心变换原点是什么 并使用元素的左上角来移动它 这是一个测试来证实这一点 div class items div class item 1 style width 100px hei
  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl
  • 如何设置引导开关的 css 颜色?

    如何在此引导开关中将蓝色更改为另一种颜色 我尝试更改输入元素的颜色和背景颜色 但它没有更改开关颜色 这是 html 和 bootstraplink https getbootstrap com docs 4 2 components for
  • 是否可以在没有 Javascript(仅 CSS)的情况下执行相同的操作(悬停效果)?

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • CSS:缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 如何使用 javascript 或 jquery 生成 CSS 路径?

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • glMultMatrix 在 glBegin() 内部不起作用

    我正在创建一个程序 允许我在 3 个空间中绘制点 使用 Catmull Rom 样条线连接它们 然后在样条线周围绘制一个圆柱体 我在用GL TRIANGLES STRIP以短间隔连接围绕样条线绘制的点的圆圈 希望将它们全部连接在一起形成围绕
  • Maven:在构建期间将资源从 jar 添加到 WEB-INF

    我想从依赖项 jar 添加资源 该依赖项位于myjar jar META INF 公共资源 myresource sk to my web应用程序 WEB INF myfolder在 mvn 打包目标期间 有谁可以提供建议 如何做到这一点
  • 创建一组匿名函数,其参数在定义时定义

    我正在尝试逐步重构现有代码 我定义了一组函数 它们仅在一个内部参数上有所不同 function loadGame1 void loadGame save1 function loadGame2 void loadGame save2 fun
  • 使用 Delphi6 将图像存储在 MS-Access 数据库中

    如何使用 Blob 数据类型在 MS Access 数据库中存储图像 我想使用记录类型来存储数据 那么 如何处理Record Type中的图像保存到数据库中呢 编辑 我想用图像存储数据 我有以下记录类型 type TPersonInfoRe
  • 如何在 Windows 上最大化窗口并禁用调整大小而不覆盖任务栏 - tkinter / tk-toolkit

    我使用 Tkinter 用 python 编写了一个应用程序 我希望它能够缩放并且不能调整大小 但是当我这样做时 它会隐藏我想保留的任务栏 有什么办法可以做到吗 from tkinter import root Tk root state
  • 在引用上调用虚函数

    在下面的代码中 为什么最后一次调用eat 关于参考c返回 动物 b 正在吃东西 据我了解 c是对实例的引用b派生类的Dog and eat 是一个虚函数 所以它应该已经返回 狗b正在吃东西 include
  • 将 64 位时间戳转换为可读值

    在我的数据集中 我有两个时间戳列 第一个是自应用程序启动以来的微秒 例如 1400805323 第二个被描述为 64 位时间戳 我希望它能够指示时钟时间 使用 1901 年 1 月 1 日开始的秒数 NTP 格式 64 位 时间戳示例 12
  • MySQL:如何重置或更改MySQL根密码?

    如何更改 ubuntu 服务器中的 MySQL root 密码和用户名 在进行任何更改之前我需要停止 mysql 服务吗 我也有 phpmyadmin 设置 phpmyadmin 会自动更新吗 在 Ubuntu Linux 上设置 更改 重
  • Java SE 平台上 XML 解析 API 的比较

    我目前正在开发一个 RSS 提要阅读器 我想知道哪种 XML 解析 API 最适合它 请注意 我并不是在寻找 Feed 解析器库 它只是有关 XML API 研究的起点 我正在寻找 Java 平台上各种 XML 解析 API 的概要 重点关
  • ES6 中带有嵌套反引号 (`) 的模板文字

    如何在 ECMAScript 6 中编写包含反引号 的模板文字 即嵌套反引号 例如 var query UPDATE packet SET association 3485435 tagname associated 我需要它的原因 这在我
  • VBA:获取工作表中选择的范围,其中选择是图表

    我有一个工作表 里面有一个图表 如果我选择一系列单元格 然后选择图表 然后在 VBE 的直接窗口中 TypeName Selection ChartArea 所以我不能使用Selection获得选定的Range 即使它在那里 按 Esc 键
  • 如何在应用程序频道中作为应用程序向用户发送直接消息

    How is it possible to send message in slack directly to the user by user id as application 此应用程序的范围 bot channels write e
  • 如何在 macOS 应用程序中提示辅助功能(来自 AppDelegate)?

    我正在构建一个需要监视全局击键的 macOS 应用程序 所以全局事件监听器将是 NSEvent addGlobalMonitorForEvents matching NSEvent EventTypeMask keyDown event i
  • 计算R中每个id的重复项的平均值

    我的数据如下所示 id date 1 a 1 a 1 b 1 c 1 c 1 c 2 z 2 z 2 e 2 x 我想计算每个 id 的重复项的平均值 即对于 id 1 我们有 2a 1b 3c 我希望输出为 2 结果应该是这样的 id m
  • 软键盘隐藏部分全屏网页视图

    我正在开发一个本机 Android 应用程序 它是网页的包装器 它工作得很好 但是有一个问题 软键盘 Android 键盘 出现在 webview 的底部 这使得如果您尝试在 webview 底部附近填写一些内容 则无法看到您正在写的内容
  • gcc 4.8 AVX 优化错误:额外的代码插入?

    很高兴 gcc 编译器 4 8 带有 Ofast 选项的 AVX 优化 然而 我发现了一个有趣但愚蠢的错误 它增加了不必要的额外计算 也许我错了 有人可以给我解释吗 原始C 源代码如下 define N 1000007 float a N
  • Onclick 使用 jQuery 播放 GIF 图像并从头开始

    我有一个网站 上面有图片 有些图像是动画 GIF 图像 我所做的是显示 GIF 的静态图像 并在单击事件时显示实际的 GIF 图像 这是我的代码 JQuery theimage click function this addClass hi
  • 在 C++ 中将字符串转换为日期

    我知道这可能很简单 但作为 C 我怀疑它会很简单 如何将 01 01 2008 形式的字符串转换为日期以便我可以操作它 我很高兴将字符串分解为日 月 年的组成部分 如果解决方案仅适用于 Windows 也很高兴 include
  • 如何在 GROUP BY Druid 返回的结果中执行 SELECT?

    我很难将下面这个简单的 SQL 查询转换为 Druid SELECT country city Count FROM people data WHERE name Mary GROUP BY country city 所以到目前为止我想出了
  • SASS 中选择器末尾和一部分的与号 (&)

    我有一个正在努力解决的问题 我有这个 mixin 这是尝试将一些 less 移植到 sass mixin button variant color background border foreverAlone iThink illNever