Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ausi/cq-prolyfill classname escaper Sass function
/**
* This node-sass function can be used to escape class names generated for ausi/cq-prolyfill.
* https://github.com/ausi/cq-prolyfill
*/
var nsass = require('node-sass');
var sassFunctions = {
/**
* Sass function to escape [!=><] characters with a
* backslash in Sass.
*/
'cqEscape($rule)': function (rule) {
var esc = rule.getValue();
esc = esc.replace('!', '\\!');
esc = esc.replace('=', '\\=');
esc = esc.replace('<', '\\<');
esc = esc.replace('>', '\\>');
while (esc.indexOf(' ') !== -1) {
esc = esc.replace(' ', '');
}
var ret = new nsass.types.String();
ret.setValue(esc);
return ret;
}
};
/**
* Usage with gulp-sass.
*/
var gulp = require('gulp');
var gsass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('src/sass/**/*.scss')
.pipe(gsass({
functions: sassFunctions
}))
.pipe(gulp.dest('assets/css'));
});
/**
* Example mixin for generating a container query CSS class.
*/
@mixin container($rule) {
&.\:container\(#{cqEscape($rule)}\) {
@content;
}
}
.container {
width: 100%;
max-width: 720px;
.child {
color: red;
// The following generate the following CSS rule:
// .container.\:container\(width\>\=360px\) .child { ... }
// Which can be matched by assigning the classname
// `:container(width>=360px)`
// For `.container` elements.
@include container('width >= 360px') {
color: blue;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment