Question

之前

#item_1, #item_2, #item_3 {
    display: inline-block;
    width: 57px;
    padding-top: 11px;
    padding-bottom: 11px;
    text-decoration: none;
}

#item_1:hover, #item_2:hover, #item_3:hover {
  color: #fff;
}

后

#item_1, #item_2, #item_3 {
    display: inline-block;
    width: 57px;
    padding-top: 11px;
    padding-bottom: 11px;
    text-decoration: none;
    &:hover {
        color: #fff;
    } 
}

让html保持不变，之前的版本有效，而后版本没有。我正在使用Rails 4构建Rails应用程序。

Answer 1

是ruby的样式库

请参阅文档sass install

例如

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
is compiled to:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

Answer 2

听起来你要么没有在你的应用程序中安装SASS，要么你正在使用的样式表不在正确的目录中。

检查是否已安装

检查您的Gemfile以查找与

类似的内容

# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'

添加它并在项目目录中运行bundle install，如果它不在那里。

检查您的样式表是否在正确的位置

导航到

app > assets > stylesheets

并查看application.css.scss是否存在。

如果确实如此，请确保这条线看起来像：

*= require_tree .

如果有，请确保代码中的样式表位于stylesheets文件夹中，并以.css.scss

结尾

嵌套悬停不起作用

2 个答案: