SASS 语法未在 css 中生成 &:hover

2023-12-02

我一直在四处寻找。在 stackoverwflow 和其他资源上发现了一些类似的问题,但其中大多数是关于语法错误的。

有人可以告诉我这段代码有什么问题以及为什么 SASS 没有在生成的 css 中生成 :hover 吗?

这是我的 SASS 代码:

.img-ornament
    -webkit-transition: all 0.5s ease
    -moz-transition: all 0.5s ease
    -ms-transition: all 0.5s ease
    -o-transition: all 0.5s ease
    transition: all 0.5s ease
    &:hover
        -webkit-transform:scale(0.75)
        -moz-transform:scale(0.75)
        -ms-transform:scale(0.75)
        -o-transform:scale(0.75)
        transform:scale(0.75)

这是生成的 CSS:

.img-ornament {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

:hover 部分在哪里?

这是萨斯迈斯特的要点https://gist.github.com/sayfulloev/396477b5a91f9511c8eb


SASS(缩进)语法对空格高度敏感。如果您将代码转换为 SCSS 语法,您将更清楚地了解它是如何解释的:

.img-ornament {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  &:hover {
    -webkit-transform:scale(0.75) {}
    -moz-transform:scale(0.75) {}
    -ms-transform:scale(0.75) {}
    -o-transform:scale(0.75) {}
    transform:scale(0.75) {}
  }
}

冒号后缺少空格导致 SASS 解释器处理transform:scale(0.75)作为选择器,而不是作为属性/值组合。由于您的选择器没有任何与之关联的样式,因此 Sass 会丢弃编译结果中的信息。

请注意,这仅限于官方的 Ruby Sass 编译器,LibSass 似乎没有此行为。

TLDR;

在冒号后添加空格。

.img-ornament
  -webkit-transition: all 0.5s ease
  -moz-transition: all 0.5s ease
  -ms-transition: all 0.5s ease
  -o-transition: all 0.5s ease
  transition: all 0.5s ease
  &:hover
    -webkit-transform: scale(0.75)
    -moz-transform: scale(0.75)
    -ms-transform: scale(0.75)
    -o-transform: scale(0.75)
    transform: scale(0.75)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SASS 语法未在 css 中生成 &:hover 的相关文章

  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 浮动图像周围具有最小列宽的流动文本

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

    我在 Yii 中有一个表单 我想向该表单添加一个类
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说
  • 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

    Premise 我找到了这两个答案 但我不明白如何将它系统地应用于许多库 检测并记录外部 JavaScript 或 CSS 资源加载失败的情况 https stackoverflow com questions 5683824 detect
  • jQuery 生成 div 和碰撞检测

    所以我的学校作业项目快要结束了 我只是错过了两件我似乎无法弄清楚的主要事情 1 如何生成具有随机位置的间隙的管道障碍物 以便鸟可以飞过 尝试使用一个函数来更改间隙位置的管道 div 的 css right attr 并在以下情况下移除管道它
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • 递归函数中变量范围的问题 [Python]

    我对 Python 比较陌生 我一直在解决 checkio com 上的问题 其中一些我发现非常有趣 我当前正在解决的问题是数独求解器 如果有人需要我写出数独规则 我很乐意效劳 我决定尝试使用回溯和递归函数来解决问题 该函数采用二维数组形式
  • 获取文件路径的相对路径? [复制]

    这个问题在这里已经有答案了 我需要从a获取相对文件路径 相对于程序可执行路径 File目的 最好的方法是什么 File仅提供绝对路径的方法 也许手动获取执行路径 然后将该路径从绝对路径中删除以获得相对路径 我使用的是 Java 7 以防万一
  • ASP.NET 访问 DataList 控件内的 Web 控件

    我不知道为什么我无法访问位于面板内的标签控件 而面板位于 DataList 内
  • 我应该把自己的 python 模块放在哪里以便可以导入

    我有自己的 python 包 并且经常使用它 我应该放置包的最优雅或最传统的目录是什么 这样就可以在不使用 PYTHONPATH 或 sys path 的情况下导入它 例如 站点包怎么样 usr lib python2 7 site pac
  • 过去可以正常工作的 Selenium Python 代码现在打开浏览器,然后卡在“data:,”中。说“chrome 无法访问”

    编辑 我刚刚意识到我最近重新安装了 Chrome 所以这可能是问题所在 我认为 Selenium 期望在 Appdata 中找到 Chrome 但它不在那里 我尝试将 C Program Files Google Chrome 中的应用程序
  • 我可以返回主函数的本地指针吗? [复制]

    这个问题在这里已经有答案了 我编写了一个函数 f 以返回指向主函数的本地指针 我知道f 函数执行后内存将被释放 然而f 函数可以返回指向a 2 数组的指针 我认为a 2 应该被释放 但它仍然存在 所以我想知道我是否可以编写一个可以返回局部指
  • 如何在 SQL Server 代理作业中以管理员身份执行 Python 脚本

    我有一个Python 3 7 2 从第三方提取数据的文件API 将数据保存到本地CSV文件于Windows Server 2016然后做了一个bulk import进入一个实例SQL Server 2016 13 0 4224 16 如果我
  • DistutilsOptionError:必须提供 home 或 prefix/exec-prefix - 不能同时提供

    我通常通过 pip 安装 python 包 对于 Google App Engine 我需要将软件包安装到另一个目标目录 我试过了 pip install I Flask restful target lib 但它失败了 必须提供 home
  • 如何在Linux ubuntu中设置C++环境变量?

    我刚刚在 Windows 上的 Virtualbox 上安装了 Ubuntu 我试图安装 cmake cmake 网站中的安装指南要求我执行以下步骤 bootstrap make make install 但是当我刚刚做的时候 bootst
  • 当我可以在没有注释的情况下调用构造函数时,为什么我应该使用@classmethod?

    我正在研究 classmethods的优点 并发现我们可以直接从任何方法调用构造函数 在这种情况下 为什么我们需要类方法 有没有一些我错过的优点 为什么这个代码 有什么好处 class Person def init self name a
  • 如何正确关闭 C# winform 中的屏幕键盘进程?

    我目前正在设计一个图像查看器 允许用户输入电子邮件并以数字方式获取图像 令我困扰的部分是关闭屏幕键盘 我用这段代码来启动windows进程 string progFiles C Program Files Common Files Micr
  • “表达式中的声明和声明”是 GNU C 特有的吗?

    Are 表达式中的声明和声明特定于 GNU C 或者这个功能也包含在C99标准中 它是 GCC 扩展 参见海湾合作委员会文档 例如这里是 gcc 4 3 3 查看 GCC 扩展的完整列表 和C99 规范可在此处获取 如果您使用 pedant
  • Phantomjs抓取网页功能不起作用

    我正在使用 phantomjs 学习如何抓取网页 到目前为止我已经开发了以下代码 我知道我能够连接到该网站 但我根本无法从表中获取数据 am我走在正确的轨道上吗 我的目标是从表中抓取数据this地点 我还知道我需要使用 includeJs
  • 在 javascript “创建阶段”中,函数是否在变量之前设置?

    我正在学习 Udemy 课程Javascript 理解奇怪的部分现在 我刚刚了解了解释器解释 JS 时发生的创建阶段和执行阶段 我有一个问题 但我首先会向您展示我正在使用的代码 http codepen io rsf pen bEgpNY
  • 何时使用 `<>` 和 `!=` 运算符?

    找不到太多这方面的信息 尝试比较两个值 但它们不能相等 就我而言 它们可以 并且经常是 大于或小于 我应该使用 if a lt gt b dostuff or if a b dostuff 这一页说它们相似 这意味着它们至少有一些不同之处
  • Java 文档:“从接口 X 继承的方法”的含义是什么

    我一定缺少一些基本的 Java 术语 类可以扩展 因此它们的方法可以是遗传由他们的子类 接口可以是实施的 实现类必须实现接口的所有方法 接口本身不实现任何内容 仅进行声明 那么 为什么当我查看 HashSet 的文档时 https docs
  • 并排反应传单

    我想并排显示两个图块层 就像并排的传单插件一样 https github com digidem leaflet side by side 但是 我不确定如何通过反应来做到这一点 有没有办法在react中使用上述插件 您对如何实现此功能还有
  • 如何从 angular.dart 组件内部调用 jquery 插件?

    我正在通过尝试制作一个可以访问现有 jquery 插件的组件来学习 angular dart 组件 我正在尝试类似以下的事情 library mylib import dart html querySelector import packa
  • 使用 JavaScript 动态加载 JavaScript

    经过一个多小时的尝试让它工作后 我认为这是因为跨域策略 但我真的认为这会起作用 我也找不到很多相关信息 但是 这是我的问题 我有一个网站叫http mysite com然后我包括一个第三方脚本 我写的 及其地址http supercools
  • SASS 语法未在 css 中生成 &:hover

    我一直在四处寻找 在 stackoverwflow 和其他资源上发现了一些类似的问题 但其中大多数是关于语法错误的 有人可以告诉我这段代码有什么问题以及为什么 SASS 没有在生成的 css 中生成 hover 吗 这是我的 SASS 代码