Zen Coding ( CSS Snippets )

[Woodwater]

I tried installing it, but I’m not sure I’m reading this right.

First question would be, is this supposed to work on OSx?

If so, what’s the exact way to install it? I think I might be doing it so very very wrong.

Thanks in advance.

[timtamboy63]

[quote=“jps”]

[quote=“timtamboy63”]
Was there anything else I needed to do in order to get this to work?[/quote]

It’d be helpful to list the platform you’re on, and if there’s any output in the console when you press the key binding (or any other text in the console in relation to any python errors).[/quote]

Went to go check the output on the console, and it works perfectly now! Not sure why, but thanks anyway

[iamntz]

Initially i though there is a bug in ST, but then i realized than the problem is here after i installed Zen.
I described the whole thing here.

Btw, there is a way to get only some parts of zen (expand abbr) up & running and discard everything else?
Is kinda conflicts with my current snippets.

[iamntz]

I store only css snippets in a .sublime-completion file. All other snippets are into .sublime-snippet files.
I noticed the issue only on php and html syntax, only if i have a > symbol just before the cursor.

[iamntz]

Thanks!

[Woodwater]

[quote=“sublimator”]It should work on OSX yes, though I personally haven’t tested it. Has anyone out there used it successfully on OSX?

I’ll see if I can get around to making a ZenCoding.sublime-package zip which can be used for one click installation.

…[/quote]

Well I tried getting the package, running it, dragging it to Sublime icon, dropping it in the packages folder. None of it worked.

Maybe there’s another way?

Thanks in advance and looking forward to giving it a go!

David.

[charlesroper]

[quote]The completions get their context from using the scoping API and the relevant selectors are declared in the python file rather than the keymap.

If you link me to the SCSS bundle so I can be sure it’s not just the root scope that’s different I’ll take a look at getting it to work for you.[/quote]

github.com/kuroir/SCSS.tmbundle

I’m using the syntax, prefs and snippets. Will the snippets conflict with the CSS auto-completions? I intend to make a ST-only fork of the SCSS bundle at some point and will strip out everything that’s not needed, like superfluous snippets.

p.s. Yeah, I saw the new --command flag. I was going to have a go at adding a txmt: protocol when I get a moment.

[Woodwater]

[quote=“sublimator”]

Maybe there’s another way?

You should be able to just check it out into your packages folder …[/quote]

Hey Sublimator,

First off, thanks for taking the time to answer my noob ass.

Allright, my mistake, I should have mentioned I use Sublime 2 I think. Right? That’s one piece of info.

So where am I now? I renamed the file downloaded from the Google Project zen coding page, because I can’t find a simple way to download stuff off the Bitbucket website because I’m a total novice with that stuff. I rename the package file to .zip and uncompress it. Move all those files in my packages folder, but nothing happens. I notice that the keymap is from the old Sublime. Should I just rewrite those to Sublime 2 JSON format? …or am I again, missing something completely.

Again, thanks for taking the time to answer.

[nobleach]

[quote=“Woodwater”]

Maybe there’s another way?

You should be able to just check it out into your packages folder …

Hey Sublimator,

First off, thanks for taking the time to answer my noob ass.

Allright, my mistake, I should have mentioned I use Sublime 2 I think. Right? That’s one piece of info.

So where am I now? I renamed the file downloaded from the Google Project zen coding page, because I can’t find a simple way to download stuff off the Bitbucket website because I’m a total novice with that stuff. I rename the package file to .zip and uncompress it. Move all those files in my packages folder, but nothing happens. I notice that the keymap is from the old Sublime. Should I just rewrite those to Sublime 2 JSON format? …or am I again, missing something completely.

Again, thanks for taking the time to answer.[/quote]

In a perfect world, you’d use an HG (Mercurial) client to clone the repository on bitbucket. Otherwise (on the bitbucket page), you click on Downloads, and download the latest release as a zip file. Unzip the contents into a folder named whatever you want… but “zencoding” would make the most sense. Here’s a direct link to the downloads page:

bitbucket.org/sublimator/sublim … /downloads

You’ll have a choice to download a zip, a gzip or a bzip. I’d go with zip if you’re a windows or mac person.

It’ll be named sublimator-sublime-2-zencoding-##############.zip (a mixture based on a hash).

[Woodwater]

nobleach,

Thanks for the info, I was completely lost with the Bitbucket UI. All I saw was the little (0) next to the download link.

I’ll try that version and report back.

Thanks!

EDIT: Well seems like that was the up to date working version. Thanks!

[nobleach]

[quote=“Woodwater”]nobleach,

Thanks for the info, I was completely lost with the Bitbucket UI. All I saw was the little (0) next to the download link.

I’ll try that version and report back.

Thanks!

EDIT: Well seems like that was the up to date working version. Thanks! [/quote]

You bet! Enjoy… this just keeps getting better and better!

[nobleach]

[quote=“sublimator”]Google Analytics tells me the majority of the traffic, 1500 or so unique visitors, to the bitbucket site was from reddit.com where someone linked directly to bitbucket rather than the forum post with installation instructions ( well … my attempt at them anyway )

Unfortunately I hadn’t taken the time to set the landing page to the wiki and put any installation instructions. Perhaps after some Bitbucket bamboozlement people would come here but this thread is getting rather long in the tooth so it’s not surprising people are getting lost.

I apologise for that.

I’ll try and update the initial post in this thread to link to the Sublime Text 2 repo on bitbucket and put some installation instructions using both the checkout and zip methods.[/quote]

Yep, I saw it on Hacker News this morning and wondered if the comments were going to point here. Ever since the Sublime beta broke on Friday, this was the next logical question to ask, “does it support Zen Coding???”

[senzo]

[quote=“charlesroper”]Brilliant!

How would I add SCSS completions? Basically, enabling the CSS functionality for SCSS files would be enough.

I’ve enabled most of the commands by adding the relevant scopes to the keybind file. I’ve not been able to work out how the new dynamic completions work. For info, the only difference between CSS and SCSS scopes is that SCSS has a source.scss instead of source.css.[/quote]

The same applies for .less files. A Syntax file can be found here: github.com/mathewbyrne/less.tmb … r/Syntaxes

[ilya]

Sublime Text 2 plus ZenCoding is just cool! Thanks you Jon and Nicholas!

[charlesroper]

@senzo I don’t want to sound glib, and this suggestion is probably totally impractical, but seriously consider switching to SCSS. It’s an improvement over Less in just about every way, not least because it’s a true superset of CSS. You can even convert from Less to SCSS: nex-3.com/posts/100-convert-less-to-scss

OK, so that does sound glib, but SCSS is so good it is well worth considering very carefully.

[charlesroper]

I just added the scopes for this. Only took a few minutes and seems to work. Let me know if anything goes awry.

Seems good. I’ll let you know if I run into any issues.

[senzo]

@charlesroper Thanks for your suggestion - appreciated I will definitely have a closer look at sass and thanks for the converter tip. As the current release of the dojo javascript toolkit uses less i have to consider carefully though.

The “goto symbol” also doesn’t work for less files by the way. Unfortunately i have no experience with tmLanguage files… will see if i can do something.

[charlesroper]

Charles, what’s the reason you reckon they went for ‘source.scss’ instead of something like less did, with its ‘source.css.less’ ?

No idea, to be honest. You could post an issue on Github asking, if you think it’s worth considering switching.

That xhtml -> scss converter looked cool. The ruby based command looked like it’d be easy enough to port to Python.

That reminds me of a question I’ve been meaning to ask: is it possible to make use of Ruby scripts in ST2? TextMate basically shells out, runs a command and receives the output of that command. Surely ST2 could do this using a Python wrapper or similar? The reason I ask is that many TM users are Rubyists, and many (most, probably) of the commands are done in Ruby, so it would ease transition to ST if simple Ruby commands could be written. The fact that ST uses Python as its language of choice could put potential users off.

[iamntz]

@sublimator: there is a way of disabling everything else but wrapping & koan console?
I do have some issues on css syntax:

1. even if i have snippet width for w the editor autocomplete me with widow
2. if the code is like this: .selector { properties:value; tab_here } the autocompletion stop working (ctrl+space or tab, doesn’t matter)

I removed everything that is css related from zencoding/zen_settings.py (btw, why you don’t use a json string like any other setting? ) and did help, but not too much.
Also, zen_settings.py doesnt work if is moved in user folder (where should be, no?)

[rchl]

I’ve noticed that it’s possible to add space between css property and value by default by modifying the zen_settings.py file (by adding fc filter to zen_settings.css.filters).

I can’t figure out how to override this one setting without changing original zen_settings.py file though. There is a note in the README.txt file in the package saying “Place your my_zen_settings.py under your user folder.” but even if I do that, it still doesn’t seem to override original values (maybe it’s being parsed before zen_settings.py file?).

Any idea how to do it in a clean way?

EDIT: OK, figured it out.

I need to store my settings in global “my_zen_settings” object.

So this did it:

""" Custom Zen Coding settings """ my_zen_settings = { 'css': { 'filters': 'html,css,fc' } }

Would be nice to have that explained in README.txt file.