Add CSS to pipeline, using compass compiler.

mysociety · Jan 17, 2014 · 5b11853 · 5b11853
1 parent 3538852
commit 5b11853
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,7 @@
 /conf/httpd.conf
 /conf/httpd.conf.deployed
 .sass-cache
-/web/stylesheets
+/web/sass/*.css
 .apdisk
 .DS_Store
 chromedriver.log

diff --git a/requirements.txt b/requirements.txt
@@ -16,6 +16,7 @@ django-tastypie==0.9.16
 django-qmethod
 django-bleach
 django-pipeline
+django-pipeline-compass-rubygem
 # Only for debugging, but very useful and easiest to just have it here
 django-debug-toolbar
 

diff --git a/spoke/settings/pipeline.py b/spoke/settings/pipeline.py
@@ -34,18 +34,39 @@
 # Compress the css and js using yui-compressor.
 PIPELINE_CSS_COMPRESSOR = 'pipeline.compressors.yui.YUICompressor'
 PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.yui.YUICompressor'
+PIPELINE_COMPILERS = (
+    'pipeline_compass.compass.CompassCompiler',
+)
+PIPELINE_COMPASS_ARGUMENTS = '-c %s/config.rb' % os.path.join(PROJECT_ROOT, 'web')
 
 # On some platforms this might be called "yuicompressor", so it may be
 # necessary to symlink it into your PATH as "yui-compressor".
 PIPELINE_YUI_BINARY = '/usr/bin/env yui-compressor'
 
+PIPELINE_CSS = {
+    'default': {
+        'source_filenames': (
+            'sass/app.scss',
+            'sass/speeches.scss',
+        ),
+        'output_filename': 'css/app.css',
+    },
+    'shakespeare': {
+        'source_filenames': (
+            'sass/app-shakespeare.scss',
+            'sass/speeches-shakespeare.scss',
+        ),
+        'output_filename': 'css/app-shakespeare.css',
+    },
+}
+
 PIPELINE_JS = {
     # Some things in document body (e.g. media player set up) call $()
     'default-head': {
         'source_filenames': (
             'javascripts/vendor/jquery.js',
         ),
-        'output_filename': 'javascripts/sayit.head.min.js',
+        'output_filename': 'js/sayit.head.min.js',
     },
     # The JS at the end of each page, before </body>
     'default': {
@@ -56,7 +77,7 @@
             'speeches/js/speeches.js',
             'javascripts/vendor/jquery.text-effects.js',
         ),
-        'output_filename': 'javascripts/sayit.min.js',
+        'output_filename': 'js/sayit.min.js',
     },
     # The media player
     'player': {

diff --git a/spoke/templates/base.html b/spoke/templates/base.html
@@ -30,11 +30,9 @@
         <link href="{% static "img/apple-touch-icon-152x152.png" %}" rel="apple-touch-icon" sizes="152x152" />
         {% block extra_headers %}{% endblock %}
         {% if request.instance.label == 'shakespeare' %}
-        <link href="{% static "stylesheets/app-shakespeare.css" %}" rel="stylesheet">
-        <link href="{% static "stylesheets/speeches-shakespeare.css" %}" rel="stylesheet">
+            {% compressed_css 'shakespeare' %}
         {% else %}
-        <link href="{% static "stylesheets/app.css" %}" rel="stylesheet">
-        <link href="{% static "stylesheets/speeches.css" %}" rel="stylesheet">
+            {% compressed_css 'default' %}
         {% endif %}
         <!-- <link href="{% static "speeches/css/speeches.css" %}" rel="stylesheet"> -->
         <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'>