CODEWITHSUNDEEP
ruby-on-railssass
m_antis
m_antis

Reputation: 79

SCSS Not Rendering - Agile Web Development With Rails 4 (Book)

I've copied the raw text files from the book for the tutorial that I'm working on, and the css is not being applied and I can't figure out why. The HTML content displays correctly though. Perhaps you will need more information from me that I'm unaware of at the moment, but I'm glad to bring it to the table if need be.

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 */

Upvotes: 1

Views: 173

Answers (1)

Richard Peck
Richard Peck

Reputation: 76774

Error

You fixed it - congrats!!

Something you may wish to consider is using SASS instead of SCSS. You only need to change the extension of your file to .css.sass - allowing you to get rid of a lot of superfluous brackets in SCSS:

#app/assets/stylesheets/application.css.sass
.products
   table
      border:
        collapse: collapse

      & tr td
         padding: 5px
         vertical:
             align: top

--

Stylesheets

Instead of inline-styling your body tag, why not create applicable stylesheets for each controller, and styling the body from these?

Like this:

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

This will allow you to keep default styling in your application.css.scss, and use things like a background image in your various [controller].css.scss files:

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

You'll then need to remember to add these assets to your pre-compilation procedure:

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

This will make your styling a LOT DRYer & more versatile

Upvotes: 1

Related Questions