Question

我不能为我的生活弄清楚为什么这个嵌套的sass不起作用。这是我的HTML：

%h1 Office Listing
#office-holder
  .listing-stats··
    #address·
      =@office_listing.address
    .listing-stats-2
      #rent
        %span.special2 Rent:·
        $#{@office_listing.rent}/month
      #size
        %span.special2 Space:·
        #{@office_listing.size} sq. feet

这都在命名html页面的div中，它有两个id - #office_listing和#show。我正在使用rails，所以我使用命名空间来整齐地分隔我的CSS的视图。这是不起作用的CSS：

#office_listing#show {
  #address {
    width: 100%;
    font-size: 50px;
    background-color: #A0183C;
    height: 100px;
    text-align: center;
    margin: auto;
    font-size: 30px;
    padding-top: 35px;
    color: white;
  }
}

然而，CSS没有显示。然而，CSS似乎编译得很好。当我检查已编译的样式表时，它们看起来像这样：

#office_listings#show #address {
  width: 100%;
  font-size: 50px;
  background-color: #A0183C;
  height: 100px;
  text-align: center;
  margin: auto;
  font-size: 30px;
  padding-top: 35px;
  color: white; }

它似乎应该以适当的HTML元素为目标。我错过了什么？

Answer 1

你能有双重ids吗？ #office_listings#show表示您在同一元素上有两个ID。这违反惯例，我的猜测是它不会匹配。将show改为一个班级，而不是#office_listings.show #address

嵌套Sass不工作？

1 个答案: