Harp v0.11.0 – Sass support
With Harp, designers and developers don’t have to worry about configuring preprocessors; Harp implicitly serves Markdown, LESS, CoffeeScript, and more, as HTML, CSS, and JavaScript. Today, we’re happy to announce the most-requested addition to this list is ready to use: Harp now supports Sass!
Name a file .scss
, and Harp will serve it as .css
—there’s no setup necessary. This also makes Harp a great way to work with SCSS libraries like Foundation 5 and Bourbon. This all happens incredibly fast as Harp is using libsass, the C++ implementation of Sass.
Install Harp
To update or install Harp, run:
sudo npm install -g harp
You can leave off sudo if you are using Windows. Now that you’ve using Harp v0.11.0, the fun with Sass and Foundation starts.
Using Sass
With Harp, you can create .scss
files just as easily as .css
files; there’s no configuration or setup required. For example, this is a main.scss
file:
$bg: #6B919E;
body {
background: $bg;
}
Now, in your template or HTML file, reference main.css
as you would normally:
<link href="main.css" type="text/css" rel="stylesheet">
That’s it
Harp has already served the SCSS file as a compiled stylesheet. Make a change to main.scss
, refresh, and the updates are already live. There’s no need to set input or output locations, and you never have the compiled, minified main.css
file mixed in with your source files.
This makes using CSS frameworks with Harp especially appealing.
Harp and Foundation 5
Harp makes Working with the Foundation 5’s SCSS easy. If you have used Harp with Bootstrap, then you know how powerful this is.
You can use Component to install Foundation into a new Harp app. We’ll be writing more about Component in the future, but for now, follow these instructions and you’ll be set.
sudo npm install -g harp
npm install -g component
Create a new project
Try out Foundation 5 by creating a new project:
harp init myproject
cd myproject
mv main.less main.scss
component install harp/foundation
The default .less
file has been renamed to .scss
, and Foundation has been installed. In main.scss
, you can import Foundation 5 as you would any other .scss
file:
@import "components/harp-foundation/scss/foundation";
Now, just serve the project:
harp server
Customising Foundation with Harp
Your project is now using Foundation—best of all, it’s using the source files. Just by changing a couple of variables or using some of Foundation’s mixins in main.scss
, you can quickly make your project your own.
Here, I took a Foundation template and pasted it into my index.ejs
file. Then, I just changed some variables in my main.scss
file:
// Variables
$primary-color: orangered;
$body-bg: lighten($primary-color, 40%);
$body-font-color: #111;
// Imports
@import "components/harp-foundation/scss/foundation";
Harp with Bourbon & Neat
Harp works perfectly with Bourbon and its grid framework, Neat. They can be installed similarly to Foundation, after installing Component and upgrading Harp.
component install harp/neat
Since Bourbon is a dependency of Neat, both are now installed in a components
directory, ready to be referenced in your main.scss
file:
@import "components/harp-bourbon/scss/bourbon";
@import "components/harp-neat/scss/neat";
Since you’re using the source files, you might even choose to import one portion of a library if the situation calls for it:
@import "components/harp-bourbon/scss/css3/linear-gradient";
Using Bourbon
Either way, I can now use Bourbon’s linear-gradient mixin in my main.scss
file:
html {
height: 100%;
@include linear-gradient(#D3DEE1, #6B919E);
}
Other updates in v0.11.0
There were other important fixes and contributions from the community in this version of Harp. Thanks everyone!
harp init
file permissions were corrected, thanks to Pablo Olmos de Aguilera Corradini- Harp now properly serves files with spaces in the name, thanks to jekyll2harp author Eric Drechsel
- Node-sass was added to Terraform, thanks to Carlos Rodriguez for starting this, and to Nick Schonning for preventing the binaries in Node-sass from rebuilding
On libsass
The C++ implementation of Sass, libsass, was chosen over the Ruby version, to give Harp it’s SCSS preprocessing ability. This means your .scss
files will turned into CSS incredibly quickly.
Libsass is not feature complete against Ruby Sass, but (as we’ve covered) many popular libraries are still supported. The most glaring missing feature, @extends
support, is actively being worked on by the lead libsass developer and will be added to Harp once that work is complete.
Ship Sass
Now that you’ve started your project with Foundation or Bourbon, you will need to get it online. Harp also helps power the Harp Platform, a front-end publishing platform integrated with Dropbox. It’s the fastest way to deploy your new Foundation or Bourbon project—you’ll never need to flatten your SCSS source files.
Looking forward
Sass support opens up many new possibilities with Harp. We will be looking closer at libsass, Foundation, Bourbon, and more, all in future posts. Subscribe to Harp Weekly, or follow @HarpWebServer on Twitter to be notified.