search

tomhodgins / element-queries-spec

A spec for a Container-Style Element Query Syntax
https://tomhodgins.github.io/element-queries-spec/element-queries.html
367 stars 14 forks source link

Enable SASS/SCSS support? #4

Open danifornells opened 7 years ago

danifornells commented 7 years ago

Hi Tommy, 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?

wrong-input.eqcss.scss

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

right-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; }
}
danifornells commented 7 years ago

I will move this discussion into https://github.com/eqcss/eqcss that seems the main repo. BTW, I accessed to this repo through the http://elementqueries.com/ site. If this is not the main repo, i suggest to update the site.