This will enable Sass+Compass with LiveReload through Guard. (Guard screen cast)
You will also need a browser component to communicate with LiveReload. (browser extension, livereload.js)
If you prefer going through a GUI, that option is available. The following instructions is specific to Mac OS X and it works through the command line.
Note that this is not specific to Rails projects. This can work for any standalone front-end project.
| /** | |
| * Polyfill for the vw, vh, vm units | |
| * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/ | |
| * @author Lea Verou | |
| */ | |
| (function() { | |
| if(!window.StyleFix) { | |
| return; |
| @mixin ie6 { * html & { @content } } | |
| #logo { | |
| background-image: url("/images/logo.png"); | |
| @include ie6 { background-image: url("/images/logo.gif"); } | |
| } |
| require 'rake' | |
| require 'css_splitter' | |
| desc 'split css files' | |
| namespace :css do | |
| task :split do | |
| infile = ENV['infile'] || raise("missing infile") | |
| outdir = ENV['outdir'] || File.dirname(infile) | |
| max_selectors = ENV['max_selectors'] || 4095 |
| // DEPRECATED | |
| // see https://github.com/livereload/livereload-js/blob/master/dist/livereload.js for an up-to-date version | |
| (function() { | |
| var __protocol = {}, __connector = {}, __timer = {}, __options = {}, __reloader = {}, __livereload = {}, __startup = {}; | |
| // protocol | |
| (function() { | |
| var PROTOCOL_6, PROTOCOL_7, Parser, ProtocolError; | |
| var __indexOf = Array.prototype.indexOf || function(item) { |
| /* | |
| Adapt.js licensed under GPL and MIT. | |
| Read more here: http://adapt.960.gs | |
| */ | |
| // Closure. | |
| (function(w, d, config, undefined) { | |
| // If no config, exit. | |
| if (!config) { |
| nbproject |
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
| # located at /Applications/TextMate.app/Contents/SharedSupport/Support/lib/scriptmate.rb | |
| # change lines 12 - 13: | |
| $KCODE = 'u' if (RUBY_VERSION.to_f < 1.9) | |
| require "jcode" unless "".respond_to? :each_char | |
| # rest of the file is unchanged |
