Less hangs Sinatra application

Question

I am trying to add Bootstrap to a Sinatra application. I have setup routes to compile bootstrap.less and responsive.less. Loading the two stylesheets separately in a web browser works as expected. But when I try to use them in a html page my application hangs. I can only stop the application with kill -9.

It seems that somehow Less imports and multiple stylesheets cause a hang of the application. I was able to isolate the problem:

app.rb

require 'rubygems'
require 'bundler/setup'

require 'sinatra'
require 'less'

get '/' do
  haml :index
end

get '/style1.css' do
  less :style1, :paths => ['views'] 
end

get '/style2.css' do
  less :style2, :paths => ['views'] 
end

views/index.haml

!!! 5
%html
  %head
    %title Hello World
    %link{'rel' => 'stylesheet', 'href' => 'style1.css', 'type' => 'text/css'}
    %link{'rel' => 'stylesheet', 'href' => 'style2.css', 'type' => 'text/css'}
  %body
    %h1 Hello World
    %p Hello World

views/style1.less

@import "mixins.less";
@import "shadows.less";

@color: #00eeff;

h1 {
  color: @color;
}

views/mixins.less

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

views/shadows.less

h1 {
  .box-shadow(6px 6px 3px #888);
}

views/style2.less

@color: #ccff00;

p {
  color: @color;
}

Accessing the index page hangs Sinatra. If I comment out style2.less in the html page or inline shadows.less or mixins.less in style1.less the page loads as expected.

Any idea what could be the problem or how I can debug this further?

Answer 1

I took your files and made small changes to them:

• I renamed style2.css to style2.less so i can use Less on it, and eventually download the style2.css with the correct css syntax ---It was not working with the other extension.
• And, I told Less that the path to search for directives, was the views path of Sinatra: Less.paths << settings.views.

So, with these changes, the Sinatra application stopped hanging.