{"id":1921,"date":"2012-06-21T15:44:08","date_gmt":"2012-06-21T14:44:08","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=1921"},"modified":"2015-02-21T23:42:46","modified_gmt":"2015-02-21T22:42:46","slug":"write-css-with-hss-and-haxe-on-osx","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2012\/06\/21\/write-css-with-hss-and-haxe-on-osx\/","title":{"rendered":"Write CSS with HSS and Haxe on OSX"},"content":{"rendered":"

I’m playing around with Haxe<\/a> for a while now. My recent experiments are with Neko and PHP.<\/p>\n

It’s a little flatfile CMS\/website that lets you write Markdown<\/a> (I’m using mdown<\/a> from Jason O’Neil) for posts.
\nFor styling (css) I’m using Twitter Bootstrap<\/a> and for the animations the jQuery wrapper (jQueryExternForHaxe<\/a>) from Andi Li.
\nThis all is not important for the post, I was just showing off… \ud83d\ude1b …. or showing what you can controle in one project using Haxe (jQuery, php, neko, js and now CSS)!<\/p>\n

Using Twitter bootstrap for styling is very quick and nice. But when you want to modify that you will need to write css.
\nNot a problem, but what if you want to do it the awesome way?<\/p>\n

Meet HSS<\/h3>\n

From the creator of Haxe (Nicolas Cannasse) comes HSS<\/a>!<\/p>\n

HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks. HSS is a CSS compiler which supports valid CSS syntax, so for every error that occurs during the parsing of the HSS file, it will display and error indicating at which file and which line the error occurred.<\/p><\/blockquote>\n

Sounds great and it’s written by someone who knows what he is doing, so lets give that a try.
\nAnd there comes trouble…<\/p>\n

Remember this: I work on Mac OS X 10.6.8.<\/p>\n

\"hss<\/a><\/p>\n

Five steps to get started with HSS on OSX<\/h3>\n

#1<\/strong>
\nDownload the file: HSS OSX version<\/a>
\nThe normal way of downloading (just click on the link) for some reason didn’t work for me. I had to download it with right-mouseclick and “Save link as…” (Google Chrome).<\/p>\n

#2 <\/strong>
\nExtract the file: the file you downloaded is a “gzip” compression file.
\nThe normale decompression program on OSX don’t work with that (Archive Utility), my default decompression program didn’t work either (The Unarchiver).
\nStuffit expander works!<\/p>\n

And this is important!<\/strong> The other programs seem to work because there is a file created but its not a “exec”. Stuffit expander creates a file name “hss” other programs create a file named “hss-1.3-osx”<\/div>\n

There is probably a terminal version to extract (here<\/a>) but I stopped trying when I had the file.<\/p>\n

#3<\/strong>
\nWhere to leave the HSS executable?
\nI had a little help with that: (Source<\/a>) for Linux AND OSX you can place it in the “usr\/bin\/<\/code>” directory.
\nThat is a hidden folder normally so you need to change that (but I hope you already did that) (read this post about it<\/a>)
\nBTW “Users” is not the same as “usr”
\nWhen you drop the HSS executable in the bin folder you will be asked for you password <\/p>\n

#4<\/strong>
\nI’m not 100% sure, but when I think about it while I write this I don’t think that you have to do this.
\nBut just in case I’m wrong….
\nYou need to give the file permission to execute (this is still true if you don’t copy the file in the usr\/bin folder).
\nOpen the terminal and type “chmod +x <\/code>” (without the quotes and don’t forget the space after x) and drag the HSS file in the terminal.
\nPress enter and you are done.<\/p>\n

Create CSS with HXML<\/h3>\n

Now we can start with the cool stuff. Lets create an hss file:
\n(the examples<\/a> are from Nicolas Cannasse himself)<\/p>\n

\r\n\/\/ Property Variables\r\nvar mycolor = #1111AA;\r\nvar myfont = "Trebuchet MS", Arial, sans-serif;\r\nbody {\r\n    color : $mycolor;\r\n    font : $myfont;\r\n}\r\n\/\/ Block Variables\r\nvar nomargin = { margin : 0px; padding : 0px; }\r\npre {\r\n    $nomargin;\r\n    color : #FF0000;\r\n}\r\n\/\/ nested blocks\r\n.faq {\r\n\tcolor : #BC683C;\r\n\t.form {\r\n\t\twidth : 100px;\r\n\t\ttextarea {\r\n\t\t\twidth : 100%;\r\n\t\t\theight : 80px;\r\n\t\t}\r\n\t\t.name {\r\n\t\t\tfont-weight : bold;\r\n\t\t}\r\n\t}\r\n\tul {\r\n\t\tmargin-left : 20px;\r\n\t\tmargin-bottom : 20px;\r\n\t}\r\n}\r\n<\/pre>\n
It’s probably useful to mention that ANY CSS file is an HSS file as long it’s validates.
\nThat means that you can take a .css file and rename it to .hss!<\/div>\n
(save the file as “style.hss” without quotes in the hss folder; see the folder structure below)<\/em><\/p>\n
Now update your .hxml file!<\/strong>
\nRemember I use MonoDevelop 3.0 for OSX <\/a><\/p>\n
Here a example of the folder structure I used for this example<\/p>\n
\r\n+ Export\r\n\t+ neko\r\n\t+ php\r\n+ Source\r\n\t+ hss\r\n\t\t- style.hss\r\n\t- Foobar.hx\r\nFoobar.hxml\r\n<\/pre>\n
Open your Foobar.hxml file and it should look something like this:<\/p>\n
\r\n-cp Source\r\n-main Foobar\r\n-neko Export\/neko\/index.n\r\n\r\n--next\r\n-cp Source\r\n-main Foobar\r\n-php Export\/php\r\n\r\n--next\r\n-cmd "cd Source\/hss\/"\r\n-cmd "hss style.hss" \r\n-cmd "hss style.hss -output ..\/..\/Export\/php\/" \r\n-cmd "hss style.hss -output ..\/..\/Export\/neko\/" \r\n<\/pre>\n
The quotes are important when on OSX (possibly also for Linux)<\/div>\n
Now every time you compile the source for Neko\/PHP the css will be compiled in the correct folder!<\/p>\n
Brrrrr<\/h3>\n
Okay, okay, I know I promote MonoDevelop<\/a> for Haxe coding.
\nBut… for hss\/css I don’t think you should use it…
\nI haven’t tried it yet, but the Haxe plugin for Textmate looks good for it.<\/p>\n
happy haxe-ing<\/p>\n
Sources used:<\/p>\n