Sass
Sass is an feature-rich, versatile and common CSS preprocessor. It is supported using the SCSS CSS superset syntax or the original indented syntax.
Why?
Harp includes the best-of-breed preprocessors by default. This means you don’t need to waste time configuring Sass, worrying about installing dependencies, minifying your CSS, or even selecting the input and output location for files. Everything just works.
Usage
Harp’s Asset Pipeline is super easy to use. All the processing happens implicitly, so there is nothing to setup. Just name your file with an .scss
extension instead of .css
and the Harp web server will see it as if it is a .css
file.
SCSS Example
In this project, there is a main.scss
and a _variables.scss
file in the css
directory, like so:
myproject/
|- index.html
+- css/
|- main.scss
+- _variables.scss
Now, you would simply reference main.css
in index.ejs
as you would with any other CSS file:
<html>
<head>
<link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
…
</body>
</html>
And your main.scss
could reference the variables like this:
@import "variables";
body {
font: 12px Helvetica, Arial, sans-serif;
}
Sass Example
In this project, there is a main.sass
and a _variables.sass
file in the css
directory, like so:
myproject/
|- index.html
+- css/
|- main.sass
+- _variables.sass
Now, you would simply reference main.css
in index.ejs
as you would with any other CSS file:
<html>
<head>
<link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
…
</body>
</html>
And your main.sass
could reference the variables like this:
@import variables
body
font: 12px Helvetica, Arial, sans-serif
If you have questions, are unsure if a feature is missing in Libsass or if there’s a bug in Harp feel free to file a GitHub issue.