{"id":2660,"date":"2012-12-17T16:54:58","date_gmt":"2012-12-17T22:54:58","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2660"},"modified":"2012-12-23T15:49:40","modified_gmt":"2012-12-23T21:49:40","slug":"using-parsecss-with-sass","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2012\/12\/17\/using-parsecss-with-sass\/","title":{"rendered":"Using <code>parsecss<\/code> with <code>Sass<\/code>"},"content":{"rendered":"<p>I started using <a href=\"http:\/\/sass-lang.com\/\">Sass<\/a> (actually, <a href=\"http:\/\/leafo.net\/scssphp\/\">scssphp<\/a>, 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 <a href=\"\/blog\/2009\/01\/16\/jquery-css-parser\/\">CSS parser<\/a> for behaviors. The good news is that it does, with one caveat.<\/p>\r\n<!--more-->\r\n<p>Anything that looks like real CSS, even with the extra <code>!<\/code> works fine:<\/p>\r\n<pre><code class=\"language-css\" >$color: blue;\r\narticle {\r\n  div.major {\r\n    css: font-weight bold ! font-weight normal ;\r\n    gradient: $color white;\r\n  }\r\n}<\/code><\/pre>\r\n<p>compiles to:<\/p>\r\n<pre><code class=\"language-css\" >article div.major {\r\n  css: font-weight bold ! font-weight normal;\r\n  gradient: blue white; }<\/code><\/pre>\r\n<p>Which is just what we want to be passed to <code>parsecss<\/code>. The caveat is that braces mess the <code>scss<\/code> parser up:<\/p>\r\n<pre><code class=\"language-css\" >div {\r\n\t-jquery-show: fold {size: 5} slow;\r\n}<\/code><\/pre>\r\n<p>Gives the error: <code>Parse error: parse error: failed at `slow;<\/code>. There's an easy fix: quote the offending lines with <code>unquote<\/code>\r\n(which sounds backwards, but actually means \"treat the enclosed text as a string but don't enclose in quotes\").<\/p>\r\n<pre><code class=\"language-css\" >div {\r\n\t-jquery-show: unquote( fold {size: 5} slow );\r\n}<\/code><\/pre>\r\n<p>Compiles to:<\/p>\r\n<pre><code class=\"language-css\" >div {\r\n  -jquery-show: fold {size: 5} slow; }<\/code><\/pre>\r\n<p>And it works across newlines:<\/p>\r\n<pre><code class=\"language-css\" >div {\r\n  div {\r\n    -jquery: unquote(\t\r\n        $(this).each(function() {\r\n          foo();\r\n         }); \/* comments pass through ! *\/\r\n     );\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p>Compiles to:<\/p>\r\n<pre><code class=\"language-css\" >\r\ndiv div {\r\n  -jquery: $(this).each(function() {\r\n          foo();\r\n         }); \/* comments pass through ! *\/; }<\/code><\/pre>\r\n<p>Sweet!<\/p>\r\n\r\n<p>Addendum 12\/23\/2012: After pulling my hair out for two hours, I realized that <code>scssphp<\/code> only implements version 3.1.20 of <code>SASS<\/code>, and the <code>%<\/code>\/<code>@extend<\/code> syntax was introduced in version 3.2. <code>@include<\/code> works fine, though.<\/p>","protected":false},"excerpt":{"rendered":"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 [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2660"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2660"}],"version-history":[{"count":13,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2660\/revisions"}],"predecessor-version":[{"id":2688,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2660\/revisions\/2688"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}