Load SCSS files into one combined application.css using Sprockets

Author: tjgrathwell

Gemfile

@@ -15,6 +15,7 @@ gem "sass"
 gem "redcarpet"
 gem "i18n", "~> 0.6.9"
 gem 'font-awesome-sass'
+gem 'sprockets'
 
 group :development do
   gem "wrong", "~> 0.7.0"

Gemfile.lock

@@ -29,6 +29,7 @@ GEM
     files (0.3.1)
     font-awesome-sass (4.2.0)
       sass (~> 3.2)
+    hike (1.2.3)
     hitimes (1.2.2)
     i18n (0.6.11)
     json (1.8.1)
@@ -38,6 +39,7 @@ GEM
       rb-inotify (>= 0.9)
     mini_portile (0.6.0)
     minitest (5.4.1)
+    multi_json (1.10.1)
     nokogiri (1.6.3.1)
       mini_portile (= 0.6.0)
     polyglot (0.3.5)
@@ -80,6 +82,11 @@ GEM
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (~> 1.3, >= 1.3.4)
+    sprockets (2.11.0)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
     thin (1.6.2)
       daemons (>= 1.0.9)
       eventmachine (>= 1.0.0)
@@ -122,5 +129,6 @@ DEPENDENCIES
   rspec
   sass
   sinatra (~> 1.4.0)
+  sprockets
   thin
   wrong (~> 0.7.0)

app.rb

@@ -22,6 +22,7 @@
 require "titleizer"
 require "asset_compiler"
 require "site"
+require 'sprockets'
 
 class InstallFest < Sinatra::Application   # todo: use Sinatra::Base instead, with more explicit config
   include Erector::Mixin
@@ -32,6 +33,9 @@ class InstallFest < Sinatra::Application   # todo: use Sinatra::Base instead, wi
   # checking availability in dynamic locale assignment, they must be strings.
   AVAILABLE_LOCALES = DEFAULT_SITES.keys.map(&:to_s)
 
+  set :assets, Sprockets::Environment.new
+  settings.assets.append_path "assets/stylesheets"
+
   configure do
     I18n::Backend::Simple.include(I18n::Backend::Fallbacks)
     I18n.load_path = Dir[File.join(settings.root, 'locales', '*.yml')]
@@ -172,6 +176,11 @@ def render_deck
     halt 404
   end
 
+  get "/assets/:file.css" do
+    content_type "text/css"
+    settings.assets["#{params[:file]}.css"]
+  end
+
   get '/font-awesome.css' do
     content_type 'text/css'
     AssetCompiler.instance.font_awesome

assets/stylesheets/application.css

@@ -0,0 +1,6 @@
+//= require 'doc_page'
+//= require 'flags'
+//= require 'big_checkbox'
+//= require 'header'
+//= require 'toc'
+//= require 'step'

assets/stylesheets/big_checkbox.scss

@@ -0,0 +1,28 @@
+$big_checkbox_size: 20px;
+
+input.big_checkbox[type=checkbox] {
+  display:none;
+  + label {
+    height: $big_checkbox_size;
+    width: $big_checkbox_size;
+    display:inline-block;
+    padding: 2px;
+    margin: 0 12px -8px 0;
+    background-color: white;
+    z-index: 2;
+    border: 2px solid #dadada;
+
+    &:hover {
+      background-image: url(/img/check-dim.png);
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+
+  &:checked {
+    + label {
+      background-image: url(/img/check.png);
+      background-size: cover;
+    }
+  }
+}