Tests importing the pdehaan/flat-ui-colors SCSS file via Bower.
$ git clone git@github.com:pdehaan/flat-ui-colors-test.git
$ npm install # installs Node and Bower dependencies
$ npm start # generates an app.css file from the app.scss file
$ open index.htmlThe app.scss Sass file simply imports the _flat-ui-colors.scss file from our local bower_components/ directory and uses the $turquoise and $pomegranate Sass variables:
@import 'bower_components/flat-ui-colors/flat-ui-colors';
.success {
background-color: $turquoise;
&:hover {
background-color: lighten($turquoise, 10%);
}
}
.error {
background-color: $pomegranate;
&:hover {
background-color: lighten($pomegranate, 10%);
}
}
button {
font-size: 2em;
}To convert the app.scss to a CSS file, app.css, you can run npm start (or call node index directly).
The index.js file uses the node-sass Node module to (which uses libsass instead of the Ruby based Sass compiler):
'use strict';
var fs = require('fs');
var sass = require('node-sass');
sass.render({
data: fs.readFileSync('./app.scss', 'utf-8'),
success: function(css) {
fs.writeFileSync('app.css', css, 'utf-8');
},
error: function(err) {
console.error(err);
}
});Finally, the index.html file imports the compiled app.css file and defines three <button> instances:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="app.css" />
</head>
<body>
<section class="buttons">
<button>default</button>
<button class="success">success</button>
<button class="error">error</button>
</section>
</body>
</html>