SASS语法不生成&:在css中悬停

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)