Enable SASS/SCSS support

[Daniel Fornells]

Hi,
I am planning to use your awesome project, but I am wondering if it would be feasible to use SASS language, to take advantage of variables and mixins. In my oppinion, pre-processors like SASS are wide used on any size projects. The main compatibility problem between SASS and your project is the $ char in the meta-selectors. I made a test using underscore instead, and works perfectly. What's your oppinion?

non-compilable-input.eqcss.scss

$brand-color: #ff0000;
@element ".this-selector input" and (min-characters: 5) {
  $this { border-color: $brand-color; }
}

compilable-input.eqcss.scss

$brand-color: #ff0000;
@element ".this-selector input" and (min-characters: 5) {
  _this { border-color: $brand-color; }
}

output.eqcss

@element ".this-selector input" and (min-characters: 5) {
  _this { border-color: #ff0000; }
}

[Daniel Fornells]

Meanwhile I found a temporary smell solution:

$brand-color: #ff0000;
@element ".this-selector input" and (min-characters: 5) {
  #{"$"}this { border-color: $brand-color; }
}

[Tommy Hodgins]

Hey @danifornells! Thanks for your interest and for checking this out, I hope you're going to have a lot of fun with EQCSS.

We actually support aliases already with preprocessors in mind since v1.1.1, in lieu of $ you can use eq_ on any of those selectors, like eq_this, eq_parent, eq_root, eq_prev, and eq_next

Also, if you're looking at using EQCSS with Sass there are some tips, including a mixin made by another user here: Using EQCSS with CSS Preprocessors

And if you're looking for an example of that working, check out this pen on codepen: http://codepen.io/tomhodgins/pen/amwKva

Or another example of just using those prefixes: http://codepen.io/tomhodgins/pen/XKbamW?editors=0100

Does this solve the problem with the $ you were foreseeing?