at-import / Compass-Extension-Template

A generic template for creating a Compass extension
38 stars 5 forks source link

[support req] Tips for development/debugging process of a compass extension? #1

Open lolmaus opened 11 years ago

lolmaus commented 11 years ago

Hi Snugug!

I find myself using more and more SASS and Drupal stuff made by you. You're awesome!

In every Drupal theme i use a number of handy mixins that leverage Susy in a particular way. I decided to create a Compass extension to make reusing my stuff easier.

I've read documentation for compass extensions and the readme of your template. I understand how to create an extension, but i don't understand how to develop/debug it.

It's very inconvenient to recreate and redownload a gem every time i make a change to my code and want to see the result. So there should be a way to code an extension and compile a Compass project that uses the extension being developed, without assembling a gem.

Compass documentation gives a hint:

If you're developing a simple extension, you may find it convenient to place your extension within an existing compass project in the extension folder.

But i don't fully understand that. Should i create an extension folder and put my code (i. e. your template) there? Or should i create a folder named after my extension? Or a combination of those, e. g. extension/foo? How do i import that to a Compass project? What does the following hint really mean?

Never specify an extension in your imports as this can cause issue when the syntax of a file changes.

Dear Snugug, please clarify this. I thing you answer would be worth putting into the template's readme.

Kind regards, lolmaus

Snugug commented 11 years ago

Let's take a quick look at my codebase for Toolkit as an example of how I develop Compass extensions.

You'll see that the project as a whole is a Compass project, with the standard Sass and Stylesheets folders, as well as a non-standard one called Compass. The Compass folder is this project (more or less); it contains all of the information for my compass extension. Inside my Sass folder, I've got screen.scss that has @import "../compass/stylesheets/toolkit"; at the top, importing my Compass extensions' primary partial so I can use it and debug it. Alternatively, I could have added include 'compass/stylesheets' to my config.rb file and instead done @import "toolkit" in my screen.scss folder. I run compass watch on root and work/debug from there.

A couple things to note with this workflow. First, if you've got any Compass Extension requirements, they need to be required in your config.rb file. Second, likewise, if you're building any Ruby code, the same needs to be in your config.rb. Third, because Compass is outside of the Sass folder, changes made to files inside will not automatically recompile unless a file inside the Sass folder is saved. The last one can probably be remedied simply by moving the Compass folder inside of the Sass folder, or potentially symlinking the Sass folder and the Extension's Stylesheets folder, but for now I make due as is.

Hope this helps!

lolmaus commented 11 years ago

Thank you for such a detailed reply!

Do i understand it correctly that what compass documentation means by the extension folder is the same what you you mean by a compass subfolder?

And one can import the extension with a simple @import directive as if it were one of his project's partials? (The second import method that you mention looks neater to me though!)

Thank you for all the useful hints!

But what does this hint from Compass docs mean?

Never specify an extension in your imports as this can cause issue when the syntax of a file changes.

Another question. Only the content of the compass subfolder is bundled when the extension is finished, right?