Question

我已经从书中复制了我正在处理的教程中的原始文本文件，并且css没有应用，我无法弄清楚原因。 HTML内容虽然正确显示。也许你需要我提供的更多信息，我现在还不知道，但如果需要，我很乐意把它带到桌面上。

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag    "application", media: "all",
    "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class='<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->
<%= yield %>
</body>
</html>

products.css.scss

// Place all the styles related to the Products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

/* START_HIGHLIGHT */
.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

  .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }

  .list_actions {
    font-size:    x-small;
    text-align:   right;
    padding-left: 1em;
  }

  .list_line_even {
    background:   #e0f8f8;
  }

  .list_line_odd {
    background:   #f8b0f8;
  }
}
/* END_HIGHLIGHT */

Answer 1

错误

你修好了 - 恭喜!!

您可能希望考虑的是使用SASS而不是SCSS。您只需要将文件的扩展名更改为.css.sass - 允许您在SCSS中删除许多多余的括号：

#app/assets/stylesheets/application.css.sass .products table border: collapse: collapse & tr td padding: 5px vertical: align: top

-

<强>样式表

为什么不为每个controller,创建适用的样式表，并为这些样式设置body，而不是内联样式？

像这样：

#app/views/layouts/application.html.erb <%= stylesheet_link_tag "application", controller_name, media: "all","data-turbolinks-track" => true %>

这样您就可以在application.css.scss中保留默认样式，并在各种background image文件中使用[controller].css.scss之类的内容：

app | - assets | - stylesheets - application.css.scss - controller1.css.scss - controller2.css.scss

然后您需要记住将这些资产添加到pre-compilation procedure：

Rails.application.config.assets.precompile += ['controller1.css', 'controller2.css']

这将使你的造型很多DRY呃＆amp;更多才多艺

SCSS无法渲染 - 使用Rails 4进行敏捷Web开发（书籍）

1 个答案: