HTML 5 Boilerplate and Compass
Hey there, at #McrFRED someone asked if I used, Sass, LESS, Compass and how I use them.
So, here's how :sunglasses:.
For this demo I'll be using H5BP.
So go ahead and grab a copy by opening up Terminal and running:
git clone [email protected]:h5bp/html5-boilerplate.git
Or download it as a zip from H5BP if you prefer.
Open up Terminal, go to the directory and run:
gem install compass
In the root directory, create a
config.rb file, open it, add the following and save:
http_path = "/"
css folder, change
main.scss and add:
Now you can start using Compass.
So for example, rather than writing out:
.scss file, you can write:
Back to Terminal, run:
Compass will now be watching for any changes and compile the CSS.
There's loads of awesomoneness going on with Compass.
Here's the gradient example http://compass-style.org/examples/compass/css3/gradient/ and there's loads more here http://compass-style.org/reference/compass/.
And… it's awesome, so yeah, it's on GitHub https://github.com/chriseppstein/compass.
Next post I'll talk about how to debug and Source Maps with Chrome Dev Tools.
Browse by category:
- case study4
- chrome dev tools4
- clojure overtone2
- dev tips1
- raspberry pi1
- responsive web design1
- web development2