Last Updated: February 25, 2016
·
2.187K
· peeyek

better folder structure for sass in sinatra

using sass in Sinatra is very easy to implement. sinatra is great framework come with

do whatever you want with me

and i like it!

now i want to share some trick how to configure sass in sinatra with better way without any gems.
your apps directory will look like this:

[apps directory]
| - app.rb
| - [public]
| - | - [bootstrap]
| - [assets]
| - | - [views]
| - - - | - layout.erb
| - | - [sass]
| - - - | - main.scss

sass & views folder are inside the assets folder. now we will tell sinatra to use our erb file and scss file with properly.

# app.rb 
require "sinatra"
configure do
    set :public_folder  , "public"
    set :views          , "assets"
    set :erb            , :layout => :"views/layout"
end

get "/sass.css" do
    scss :"sass/main"
end
# you should at <link href="/sass.css" .. to your template file.
# change the `sass.css` with whatever name that you prefer.

whats going on configure block?

set :public_folder , "public"' set the name of public folder, default is public this is a place where you place some bootstrap or the other front-end toolkit.

set :views , "assets" set the template folder name. this a place for all template and sass file.

set :erb , :layout => :"views/layout" set globally to erb template to use layout engine in views/layout.erb.

when you use namespace extension, the setting globally erb template is doesn't work.
you should add inside the block. like this:

namespace "/login/?" do
    get do
        erb :"views/auth/login", :layout => :"views/layout"
    end

    post do
        # do whatever
    end
end