Zen Coding ( CSS Snippets )

[jbrooksuk]

I love ZenCoding. It’s the bomb.

Cheers Sublimator!

[whololo]

Hi

Any ideas on how I can get zen coding enabled in .php files?

It works great in html and css.

Thanks

PS: replies like "dont put html in php files are not appreciated

[whololo]

code.google.com/p/zen-coding/wik … breviation

I dont get the last example working in sublime text 2:

lorem lorem lorem

ul#nav>li*>a

=>

• lorem
• lorem
• lorem

[BlackYeLL]

Hello,

I love this plugin;

However, I have a problem using it with the Twig bundle.

When inside a var declaration, the “.” (dot) triggers class=""

I.e. if I want to type : {{ foo.bar }}

I get : {{foo class=""}}

Thank you

[Acorn]

Amazing plugin!

How do you get it working with SCSS?

I have the file named as filename.scss, I have installed the SCSS textmate syntax file and added it to sublime, and have that syntax selected.

When I try something like “pos”, it says there are no completions. Works fine on normal CSS.

[Acorn]

Yep, that’s the SCSS tm bundle I’m using.

This is what the contents of my SCSS folder in my packages directory looks like:

CSS Zen.tmLanguage
CSS Zen.tmLanguage.cache
SCSS.tmLanguage
SCSS.tmLanguage.cache
source.textmate

I assume I’m correct in having SCSS selected as the syntax rather than CSS Zen.

Edit:

Argh, I was trying to expand an invalid snippet

Are there any guides anywhere on zencoding for CSS?

[charlesroper]

In my admittedly brief testing it worked fine. I haven’t heard back from charlesroper so I guess it’s working for him … ? Charles?

Sorry, didn’t get a chance to fully test and get back to you - had a big project to finish last week and was presenting at a conference, so 'twas a bit hectic. Yes, it seems to be working, but there is some unexpected behaviour that I don’t quite understand. In short, if I type one letter of a value, then hit Ctrl-Space, a dropdown list of completions will appear, but the completion I’m after doesn’t appear. E.g., I type display: b[Ctrl-Space] and would expect ‘block’ to appear in the list, but it doesn’t. If I type a few more chars, e.g, display: blo[Ctrl-Space], the completion appears. I’ve done a screencast to demonstrate: screenr.com/GC2s

Update: If I hit Ctrl-Space directly after the colon, I get a correct list of completions.

I thought we might have some problems with the nested selections in SCSS, but again, things seem to work pretty much apart from this funkyness: screenr.com/FC2s

In that case, I’m puzzled as to why I get two identical display completions. Ah, perhaps it’s because it’s using the ‘display’ present in the document and the ‘display’ present in your Zen internals? Seems like it should collapse identical entries.

Finally, is there any way of getting it to insert a space after the colon automatically when you do a value completion? I.e. If I type display:[Ctrl-Space] and choose, say, :inline-block from the list, I get this:

display:inline-block;

But what I want is this (note the space after the colon):

display: inline-block;

Possible?

[charlesroper]

I guess you want an optional space if directly in front of a colon and a closing semi-colon if there is none? That’s definitely doable.

Yes. Textmate uses environment variables for this sort of thing. In this case, you’d set the var to a space. That space would get injected if the var exists, and not if it doesn’t exist. In E you could set the vars on a per project basis. Not sure if you could do the same with TM. It always struck me as quite an elegant way of doing it, although it was a bit opaque if you didn’t know the trick of setting the env var.

Thanks for the rest of the info. I’ll have to read and re-read to digest it all I think.

[bizoo]

Hi sublimator,

Don’t use ZenCoding but it look like this topic relate to an issue in it:
https://forum.sublimetext.com/t/bug-enter-key-problem/1966/1#p11058

[capnhud]

How do you clear the contents when using expand with abbreviation. Currently right now what is happening is something like this:
I have some sample text

Removeable Screen Walls
Sets up in minutes
Straight leg construction
No tools required
Heavy duty polyester fabric is water repellent, UV resistant and fade resistant
Sturdy, steel frame
Specifications:
Size: 10’ x 10’ x 115"
Area: 100 sq.ft.

I want to make this an unordered list so I select it and push Ctrl+Alt+Enter and input
ul#desc>li* it formats it correctly, however when I go to format another selection by pushing Ctrl+Alt+Enter

the company that truly understands the quality level demanded by those who take the outdoors seriously, whether it’s a family gathering in the park, a fishing trip by the river

it starts with what was last in the enter haiku field (unordered list) so that I must backspace and change that to the new (paragraph). So my question is how do you clear the field after each input? Or is this by design?
Because I feel I must be doing this wrong.

Using the latest zen coding
WIndows Build 2081

[ldhughes]

Ctrl+u clears the entry field.

[capnhud]

[quote=“sublimator”]Good point, in general you are more likely to want to input a completely new entry yeah? It would be better to have the input to default to an empty string and have something like ctrl+(up|down) cycle through the history.

Bad design.[/quote]

Ok just thought it was me, will ctrl+u the go around

[guillermooo]

I’ll be happy to help if I can! Just email me with your questions.

[Driscolle]

Cool and awesome i like that… Great idea…

[capnhud]

[quote=“sublimator”]

[quote=“sublimator”]Good point, in general you are more likely to want to input a completely new entry yeah? It would be better to have the input to default to an empty string and have something like ctrl+(up|down) cycle through the history.

Bad design.[/quote]

Ok just thought it was me, will ctrl+u the go around

I made it default to an empty string. When I get some time I’ll get around to adding some up/down input history bindings.[/quote]

Thanks for making the change. Will give the new plugin a test.

[ilya]

Hm, after last update wrapping didn’t work for me anymore. But when I try to use wrapping with ZenCoding, undo is broken and do something very ugly

[ilya]

Just did a quick test and wrapping works good.
Tomorrow I will test more intensively.
Sublimator, thank you very much!

[ilya]

@Ilya, No problems.

Now I have not problems with wrapping and undo. But now ZenCoding works not as expected For example, Enter Koan make all code inline (not formatted) and didn’t place caret to href="|".

[oriceon]

http://img26.imageshack.us/img26/5954/errgw.png

See that. I think this is caused by Zen Coding.

Sometimes when i click Preferences … i get this.

I use dev 2096 x64 on Windows 7 but this happens from other dev builds and it still here

[oriceon]

And the problem is caused by zen or by the editor?