Question

I’m getting used to working with compass and Haml now and it’s pretty awesome. However, it would be great if the two could work more closely together. It seems not possible, however I might have overlooked it or didn’t search properly.

I guess I mean something like this:

general variable file:

$container-id = "container"
$primary-column-id = "navbar"

Haml file:

!!! 5  
%html(lang="en")  
  %head  
    %title  
  %body  
    #{$container-id}  
      %section#{$primary-column-id}

Compass file:

#{$container-id} {
  width: 900px;
}

#{$primary-column-id} {
  width: 400px;
}

Answer 1

From my research and usage, this is currently not supported (without some sort of custom outside solution). I agree that it would be an awesome feature in theory, but I assume it doesn’t exist because of separation of concerns.

For example, specific Haml files would have to be aware of linkage to other specific Sass files when compiled, and pick up declared variables. This does happen Sass <- -> Sass, via partials. However, with the idea above -> the markup (Haml) is blending somewhat with the styling (Sass/Scss). Though they reference one another – they have different purposes. e.g. An ID in the DOM is an attribute of the object, whereas in the stylesheet the ID is the selector of the object.

A framework (such as Compass) could theoretically achieve something like this because it looks at projects – but it might be more appropriate to have a unified project wide config file (neither Sass nor Haml) for your variable declarations or something.

This’d be a great question to get Chris Eppstein’s opinion on: https://stackoverflow.com/users/41221/chriseppstein