基本级别规则不能包含父选择器引用字符“&”

The*_*fly 5 sass

我正在阅读ROR 4教程,其中有一章提到将Sass编译为CSS。我将(#logo:hover and #footer:hover)修改为, & :hover 但发生了错误

Base-level rules cannot contain the parent-selector-referencing character '&'.
 (in/Users/snailwalker/rails_projects/sample_app/app/assets/stylesheets/custom.css.scss:54)
Run Code Online (Sandbox Code Playgroud)

我的SCSS:

/* header */
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  line-height: 1;
}
& :hover {
  color: #fff;
  text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)

VCa*_*llo 5

我相信您需要将其移动到大括号内以获取徽标。

像这样:

# logo {
    float: left;
    ...
  &:hover {
    color: color;
  }
}
Run Code Online (Sandbox Code Playgroud)