SASS语法不会在css中生成&：hover [英] SASS syntax is not generating &:hover in css

问题描述

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

I've been searching around. Found some similar questions on stackoverwflow and other resources, but most of them was regarding syntax mistakes.

有人可以告诉我这个代码有什么问题，为什么SASS不会产生：hover在结果css？

Can somebody tell me what is wrong with this code and why SASS is not generating :hover in resulting css?

这是我的SASS代码：

Here is my SASS code:

.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部分？

Where is :hover portion?

这里是sassmeister的gist
https://gist.github.com/sayfulloev/ 396477b5a91f9511c8eb

here is sassmeister's gist https://gist.github.com/sayfulloev/396477b5a91f9511c8eb

推荐答案

SASS（缩进）语法高度空白敏感。如果你将代码转换为SCSS语法，你会更清楚地了解它是如何解释：

The SASS (indented) syntax is highly whitespace sensitive. If you convert your code to SCSS syntax, you'll get a clearer idea of how it is being interpreted:

.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丢弃编译结果中的信息。

The lack of whitespace after the colon is causing the SASS interpreter to treat transform:scale(0.75) as a selector, rather than as a property/value combination. Since your selector doesn't have any styles associated with it, Sass discards the information in the compiled results.

注意，这仅限于官方的Ruby Sass编译器，LibSass

Note that this is limited to the official Ruby Sass compiler, LibSass does not appear to have this behavior.

在冒号后添加空格。

.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中生成&：hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！