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

Question

我一直在四处寻找。在 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

Answer 1

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)