Categories
Haxe Misc Open source / Freeware

Write CSS with HSS and Haxe on OSX

I’m playing around with Haxe for a while now. My recent experiments are with Neko and PHP.

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

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

Meet HSS

From the creator of Haxe (Nicolas Cannasse) comes HSS!

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.

Sounds great and it’s written by someone who knows what he is doing, so lets give that a try.
And there comes trouble…

Remember this: I work on Mac OS X 10.6.8.

hss example code

Five steps to get started with HSS on OSX

#1
Download the file: HSS OSX version
The 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).

#2
Extract the file: the file you downloaded is a “gzip” compression file.
The normale decompression program on OSX don’t work with that (Archive Utility), my default decompression program didn’t work either (The Unarchiver).
Stuffit expander works!

And this is important! 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”

There is probably a terminal version to extract (here) but I stopped trying when I had the file.

#3
Where to leave the HSS executable?
I had a little help with that: (Source) for Linux AND OSX you can place it in the “usr/bin/” directory.
That is a hidden folder normally so you need to change that (but I hope you already did that) (read this post about it)
BTW “Users” is not the same as “usr”
When you drop the HSS executable in the bin folder you will be asked for you password

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

Create CSS with HXML

Now we can start with the cool stuff. Lets create an hss file:
(the examples are from Nicolas Cannasse himself)

// Property Variables
var mycolor = #1111AA;
var myfont = "Trebuchet MS", Arial, sans-serif;
body {
    color : $mycolor;
    font : $myfont;
}
// Block Variables
var nomargin = { margin : 0px; padding : 0px; }
pre {
    $nomargin;
    color : #FF0000;
}
// nested blocks
.faq {
	color : #BC683C;
	.form {
		width : 100px;
		textarea {
			width : 100%;
			height : 80px;
		}
		.name {
			font-weight : bold;
		}
	}
	ul {
		margin-left : 20px;
		margin-bottom : 20px;
	}
}
It’s probably useful to mention that ANY CSS file is an HSS file as long it’s validates.
That means that you can take a .css file and rename it to .hss!

(save the file as “style.hss” without quotes in the hss folder; see the folder structure below)

Now update your .hxml file!
Remember I use MonoDevelop 3.0 for OSX

Here a example of the folder structure I used for this example

+ Export
	+ neko
	+ php
+ Source
	+ hss
		- style.hss
	- Foobar.hx
Foobar.hxml

Open your Foobar.hxml file and it should look something like this:

-cp Source
-main Foobar
-neko Export/neko/index.n

--next
-cp Source
-main Foobar
-php Export/php

--next
-cmd "cd Source/hss/"
-cmd "hss style.hss" 
-cmd "hss style.hss -output ../../Export/php/" 
-cmd "hss style.hss -output ../../Export/neko/" 
The quotes are important when on OSX (possibly also for Linux)

Now every time you compile the source for Neko/PHP the css will be compiled in the correct folder!

Brrrrr

Okay, okay, I know I promote MonoDevelop for Haxe coding.
But… for hss/css I don’t think you should use it…
I haven’t tried it yet, but the Haxe plugin for Textmate looks good for it.

happy haxe-ing

Sources used:

Categories
Haxe

Haxe IDE for OSX: Monodevelop 3.0

Update #1: I thought I had finished this post already, but it was not finished yet… In the mean while MonoDevelop is update to 3,0,3,2

I’ve been using MonoDevelop and the MonoDevelop Haxe Language Binding addin for all my Haxe experiments. It’s better than FDT 5 (I haven’t update to FDT 5.5 yet, because I’m at work in the middle of a project: I never update my computer/software during a project!!!)

This all is possible because Joshua Granick decided that MonoDevelop could be used for Haxe development.

Don’t get me wrong: MonoDevelop is great compared to the competition, especially because it’s free! But there are still some bugs to be crushed:
A while back I send a bug to the MonoDevelop development team about templates.

The formatter in 2.8.x is dead – can you switch somehow to monodevelop 2.9.x or master ?

So I was glad to get a message from the MonoDevelop IDE that I could update to 3.0.
To bad that they changed the api, and that broke the MonoDevelop Haxe Language Binding addin.

I’ve tried to update the plugin myself:
Forked the git repository.
First I thought I just had to change 2.8 to 3.0: no luck there I got error on excisting packages:
using MonoDevelop.Projects.CodeGeneration
First I thought it was a OSX related problem: so Installed MonoDevelop 2.8 again.
And there I didn’t have this problem: so I compiled the plugin there and installed it in MonoDevelop 3.0.
Still no go: only errors. Perhaps they changed something in the API? Could find that anywhere on the website and documentation. It had to end for me there: other stuff needed my attention.

Luckely Joshua fixed everything (there was indeed an API change) and got the plugin working again.

Installing MonoDevelop 3.0

Some extra issues I encountered installing the new MonoDevelop 3.0 (3.0.1):

I’m not a 100% sure but the release notes from MonoDevelop 3.0 mentioned:

This release of MonoDevelop needs at least Mono 2.10.9 version 11 and GTK#2.12.8 to run.

That would mean that we need to install a beta version of Mono
http://www.go-mono.com/mono-downloads/download.html
Beta Version: 2.10.9 (Release Notes)

Because the new version broke the ‘automatic’ install you need to install the haxe addin manually:
visit http://addins.monodevelop.com/Project/Index/41
and download:
Monodevelop 3.0
get the first one in the list
package mac

How to install the addin?
Monodevelop >> addin-manager >> left bottom button “Install from file”
find the file you just downloaded and “Open” it

your good to go

Source can be found at github for people who want to contribute to the plugin (yes please!):
https://github.com/jgranick/md-haxebinding

On of the most pleasant improvement of MonoDevelop on OSX is:
* anoying copy/paste bug (copied part duplicates the last character)

example:
_sp.graphics.
change _sp into _sprite
becomes
_sprite..graphics.

happy haxe-ing