SCSS styles not being shown in the Sinatra app from "Jump Start Sinatra" book - ruby

Question

I was following along to the tutorial in the book Jump Start Sinatra and I have looked over the file for typos. But for some reason the styles wont show up.
Here are the instructions
This is what I have
main.rb
require 'sass'
require 'sinatra'
require 'slim'
require 'sinatra/reloader' if development?
get('/styles.css'){ scss :styles }
get '/' do
slim :home
end
get '/about' do
#title = "All about this website"
slim :about
end
get '/contact' do
slim :contact
end
not_found do
slim :not_found
end
require 'sass'
get('/styles.css'){ scss :styles }
The book said to delete the old styles.css from the public folder, which I did (and that was previously working fine). And the book did say to included the styles.scss in the views directory. Here is my structure and styles.css file
Does this imply that I should also remove the reference to the CSS file that I had in the layout.slim file? This is what I have there now
layout.slim
doctype html
html lang="en"
head
title== #title || "Songs by Sinatra"
meta charset="utf-8"
body
header
h1 Songs by Sinatra
== slim :nav
section
== yield
What I am missing? is it a typo? am I forgetting to do something? does the book have a gap in information that it assumes that a reader would know to do? I added the code, then ran gem install sass and restarted the server. So what could i possibly be missing?

Answer 1

Ok so this had multiple errors. Hopefully my explanation can prompt you to improve your problem solving skills.
I did have some typographical errors in my styles.css file as pointed out in comments. So to test it I visited their repo on github. Then copy/pasted into my file.
Then I did notice that the author did a poor job in explaining what should be done in the layout file. So I checked his file in the repo (by the way,what is written in the book's previous chapter was not accurate). Anyways here is the layout file that worked
layout.slim
doctype html
html lang="en"
head
title== #title || "Songs by Sinatra"
meta charset="utf-8"
link rel="stylesheet" href="/styles.css"
body
header
h1 Songs by Sinatra
== slim :nav
section
== yield
What was needed was the modification to refence the CSS file
link rel="stylesheet" href="/styles.css"