TLDR;

Question

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

有人可以告诉我这段代码有什么问题吗？为什么SASS没有生成：将鼠标悬停在结果css中？

这是我的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;
}

在哪里：悬停部分？

这是sassmeister的要点 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)

SASS语法不会在css中生成＆amp;：hover

1 个答案:

TLDR;