我一直在四处寻找。在 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(使用前将#替换为@)