sinatra (5) - CSSフレームワーク -

(4)の続き。

SCSSはCSSとほぼ同じ文法で記述でき、なおかつ冗長かなと思えばSCSS記法を使え重宝します。
同様のフレームワークにLESSもありますので、好みに応じて使えばよいでしょう。
ググると両者の特徴や違いを説明しているサイトが見つかります。

.
├── config
├── config.ru
├── Gemfile
├── Gemfile.lock
├── Guardfile
├── lib
│     └── app.rb
├── public
├── spec
│     ├── app_spec.rb
│     └── spec_helper.rb
└── views
       ├── index.slim
       ├── layout.slim
       └── style.scss  # 追加

Gemfile

source :rubygems

gem 'sinatra', require: 'sinatra/base'
gem 'slim'
gem 'sass'

group :development do
  gem 'sinatra-reloader', require: 'sinatra/reloader'
end

group :test do
  gem 'rspec'
  gem 'rack-test', require: 'rack/test'
  gem 'guard-rspec'
end

views/style.scss

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}
h1 {
  font-size: 2.4rem;
}

views/layout.slim

doctype html
html
  head
    title My App
    link rel='stylesheet' href='css/style.css'
  body == yield

lib/app.rb

class MyApp < Sinatra::Base

  configure do
    set :root, File.expand_path('../../', __FILE__)
  end

  configure :development do
    Bundler.require :development
    register Sinatra::Reloader
    Slim::Engine.set_default_options :pretty => true
  end

  get '/' do
    slim :index
  end

  get '/css/:file.css' do
    scss params[:file].to_sym
  end
end

$ bundle install
$ bundle exec rackup

コマンドラインでscssファイルからスタイルシートに変換もできますが、こう記述しておけば実行時に変換してくれます。
また、スタイルシートを追加、分割してもlayout.slimに追加するだけで、app.rbはそのままで構いません。railsだと一括でスタイルシートを読むヘルパーが用意されていますが、同様にヘルパーを定義するなり別途用意してもよいと思います。