Addition to CSS zen coding

[agibsonsw]

Hello again. Zen Coding is fantastic, but perhaps my CSS Snippet below could be regarded as an interesting addition to it

The trigger is 'propx', so if you type the following on a blank line and press TAB: po to le di propx
you will obtain:
position: ;
top: ;
left: ;
display: ;

But, more interestingly , if you type: po absolute to 5px le 12px ma 5px pa propx
You will obtain:
position: absolute;
top: 5px;
left: 12px;
margin: 5px;
padding: ;

You will be left on your original line (with an extra semi-colon) but just press Ctrl-Shift-K to delete the line.

You can use apostrophe's, hyphens, etc., when supplying values, e.g. fonts. The only proviso is that if, for example, your font includes the two letters 'le' then separate them with a back-slash 'l\e' to prevent the word 'left' appearing.

I've not been working on this too long, so currently the abbreviations you can use are: cli cl co cu ff fl fo he le ma bo di le pa po ri to

Some feedback would be appreciated Andy.

Code: Select all

<snippet>
   <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((BO)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RI)|(TO)|(WE)) |( {2,}|\t)/?2:;\nbottom\: :?3:;\nclip\: :?4:;\ncolor\: :?5:;\ncursor\: :?6:;\nclear\: :?7:;\ndisplay\: :?8:;\nfont-family\: :?9:;\nfloat\: :?10:;\nfont\: :?11:;\nheight\: :?12:;\nleft\: :?13:;\nmargin\: :?14:;\npadding\: :?15:;\nposition\: :?16:;\nright\: :?17:;\ntop\: :?18:;\nwidth\: /gi};
]]></content>
   <tabTrigger>propx</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>po to, etc</description>
</snippet>

[agibsonsw]

Actually (I should have made clear) the splitting of letters with a backslash - l\e - is only required if these two letters appear as a separate word, and are one of the abbreviations. So 'le font' would require 'l\e font' but 'lemon' would be fine

[agibsonsw]

Small correction - 'width' is spelt with an 'i', Doh!!

Code: Select all

<snippet>
   <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((BO)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RI)|(TO)|(WI)) |( {2,}|\t)/?2:;\nbottom\: :?3:;\nclip\: :?4:;\ncolor\: :?5:;\ncursor\: :?6:;\nclear\: :?7:;\ndisplay\: :?8:;\nfont-family\: :?9:;\nfloat\: :?10:;\nfont\: :?11:;\nheight\: :?12:;\nleft\: :?13:;\nmargin\: :?14:;\npadding\: :?15:;\nposition\: :?16:;\nright\: :?17:;\ntop\: :?18:;\nwidth\: /gi};
]]></content>
   <tabTrigger>propx</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>po to, etc</description>
</snippet>

[agibsonsw]

I was going to let this settle, but I've come up with something a little bit cool! If I type:

po ab bw 12px4 propx

(notice the 4 after px (or pt, etc.,)) it produces

position: absolute;
border-width: 12px 12px 12px 12px;

Admittedly, I've still got to amend the 12's, but still.. this pleased me

Good night, Andy.

Code: Select all

<snippet>
   <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((AB)|(BO)|(BW)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FI)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RE)|(RI)|(ST)|(TO)|(VI)|(WI)|(ZI)|([0-9]+)(cm|em|ex|in|mm|pt|pc|px)4) |( {2,}|\t)/?2:absolute:?3:\nbottom\: :?4:;\nborder-width\: :?5:;\nclip\: :?6:;\ncolor\: :?7:;\ncursor\: :?8:;\nclear\: :?9:;\ndisplay\: :?10:;\nfont-family\: :?11:fixed:?12:;\nfloat\: :?13:;\nfont\: :?14:;\nheight\: :?15:;\nleft\: :?16:;\nmargin\: :?17:;\npadding\: :?18:;\nposition\: :?19:relative:?20:;\nright\: :?21:static:?22:;\ntop\: :?23:;\nvisibility\: :?24:;\nwidth\: :?25:;\nz-index\: :?26:$26$27 $26$27 $26$27 $26$27/gi};
]]></content>
   <tabTrigger>propx</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>po to, etc</description>
</snippet>

[agibsonsw]

This is better; typing

po ab bw 12px4 propx

produces

position: absolute;
border-width: 12px px px px;

- so I don't have to delete the 12's. Good night (definitely!)

Code: Select all

<snippet>
   <content><![CDATA[$0${TM_CURRENT_LINE/\\|(?:\b| )((AB)|(BO)|(BW)|(CLI)|(CO)|(CU)|(CL)|(DI)|(FF)|(FI)|(FL)|(FO)|(HE)|(LE)|(MA)|(PA)|(PO)|(RE)|(RI)|(ST)|(TO)|(VI)|(WI)|(ZI)|([0-9]+)(cm|em|ex|in|mm|pt|pc|px)4) |( {2,}|\t)/?2:absolute:?3:\nbottom\: :?4:;\nborder-width\: :?5:;\nclip\: :?6:;\ncolor\: :?7:;\ncursor\: :?8:;\nclear\: :?9:;\ndisplay\: :?10:;\nfont-family\: :?11:fixed:?12:;\nfloat\: :?13:;\nfont\: :?14:;\nheight\: :?15:;\nleft\: :?16:;\nmargin\: :?17:;\npadding\: :?18:;\nposition\: :?19:relative:?20:;\nright\: :?21:static:?22:;\ntop\: :?23:;\nvisibility\: :?24:;\nwidth\: :?25:;\nz-index\: :?26:$26$27 $27 $27 $27/gi};
]]></content>
   <tabTrigger>propx</tabTrigger>
   <scope>source.css  meta.property-list.css</scope>
   <description>po to, etc</description>
</snippet>

[castles_made_of_sand]

I like the concept.

However, it doesn't seeem to do anything for me beyond inserting a `;`

It's supposed to be using regex transformation on what you type after insertion?

[agibsonsw]

I like the concept.

However, it doesn't seeem to do anything for me beyond inserting a `;`

It's supposed to be using regex transformation on what you type after insertion?

Hello. You type the abbreviations on the same line, but preceding, the trigger 'propx'. So type this on a blank line:

po ab bw 12px4 propx

and press tab (for the trigger on propx). It reads the current line, which is the content up-to the trigger.

[castles_made_of_sand]

Oh, I see! that's pretty neat!

I like the compact syntax with the contextual use of ` `

[agibsonsw]

Oh, I see! that's pretty neat!

I like the compact syntax with the contextual use of ` `

Thank you. I haven't used ZenCoding a lot, I'll have to compare, but on a first glance it seems to use slightly messier abbreviations; and I don't know if it allows us to add extra 'stuff' between abbreviations.

I can also add a number of common values, such as 'au' for auto, 'no' for 'none' etc. Interesting

[castles_made_of_sand]

I'd like to see something with a minimal syntax like that for easy entry but with fuzzy matching (only when haven't found an exact match) and feedback as you type.