Created
July 28, 2014 17:41
-
-
Save FranciscoG/b9d4ad3bcd1ccab168d7 to your computer and use it in GitHub Desktop.
Stylus extension to support full 6 digit hex colors when needed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Extend Stylus to allow use of 6 digit hex color | |
* modified from this StackOverflow answer | |
* http://stackoverflow.com/a/9378924/395414 | |
*/ | |
module.exports = function() { | |
var hex = function(n) { | |
return n.toString(16) | |
}; | |
return function(style) { | |
style.define('longColor', function(color) { | |
var hexNum = [color.r, color.g, color.b].map(hex); | |
hexNum.forEach(function(el, i, arr) { | |
if (el === 0 || el === "" || el === "0") { | |
hexNum[i] = "00"; | |
} else if (el.toString().length === 1) { | |
hexNum[i] = "0" + el.toString(); | |
} | |
}); | |
return hexNum.join(""); | |
}); | |
} | |
}; | |
/* | |
Use: | |
I use Gulp-Stylus so in my gulpfile.js the stylus part looks like this: | |
var stylus = require('gulp-stylus'); | |
var nib = require('nib'); | |
var longColor = require("./src/stylus/extend/color.js") | |
// gulp-stylus blocks gulp watch if you don't handle the error like this | |
function handleError(err) { | |
console.log(err.toString()); | |
this.emit('end'); | |
} | |
gulp.task('stylus', function() { | |
return gulp.src('./src/stylus/app.styl') | |
.pipe(stylus({ | |
use: [nib(), longColor()], | |
errors: true | |
})) | |
.on("error", handleError) | |
.pipe(gulp.dest('./app/css')); | |
}); | |
in your stylus file you can use it like this | |
.something | |
color: longColor(#333) | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment