I started using Sass (actually, scssphp, since I'm a PHP troglodyte) and I'm loving it. It makes CSS much cleaner; just having variables makes everything easier. The only catch is whether it would work with the non-standard CSS I use with my CSS parser for behaviors. The good news is that it does, with one caveat.
Anything that looks like real CSS, even with the extra ! works fine:
$color: blue;
article {
div.major {
css: font-weight bold ! font-weight normal ;
gradient: $color white;
}
}compiles to:
article div.major {
css: font-weight bold ! font-weight normal;
gradient: blue white; }Which is just what we want to be passed to parsecss. The caveat is that braces mess the scss parser up:
div {
-jquery-show: fold {size: 5} slow;
}Gives the error: Parse error: parse error: failed at `slow;. There's an easy fix: quote the offending lines with unquote
(which sounds backwards, but actually means "treat the enclosed text as a string but don't enclose in quotes").
div {
-jquery-show: unquote( fold {size: 5} slow );
}Compiles to:
div {
-jquery-show: fold {size: 5} slow; }And it works across newlines:
div {
div {
-jquery: unquote(
$(this).each(function() {
foo();
}); /* comments pass through ! */
);
}
}
Compiles to:
div div {
-jquery: $(this).each(function() {
foo();
}); /* comments pass through ! */; }Sweet!
Addendum 12/23/2012: After pulling my hair out for two hours, I realized that scssphp only implements version 3.1.20 of SASS, and the %/@extend syntax was introduced in version 3.2. @include works fine, though.
Leave a Reply