Sublime Forum

Addition to CSS zen coding

#1

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

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 :smiley: , 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 :frowning: Andy.

<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>

0 Likes
#2

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 :sunglasses:

0 Likes
#3

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

<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>

0 Likes
#4

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 :smiley:

Good night, Andy.

<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>

0 Likes
#5

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!)

<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>

0 Likes
#6

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?

0 Likes
#7

[quote=“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?[/quote]

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.

0 Likes
#8

Oh, I see! that’s pretty neat! :smile:

I like the compact syntax with the contextual use of

0 Likes
#9

[quote=“castles_made_of_sand”]Oh, I see! that’s pretty neat! :smile:

I like the compact syntax with the contextual use of [/quote]

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 :bulb:

0 Likes
#10

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.

0 Likes
#11

Hey, you’re inspiring me! I think I could do that, combining this and my previous example. I could produce a comment line, and as you type abbreviations, it creates the properties below. You could back track, and I can supply commentary as you type :astonished:

/* po to tip: No tip! */ position: ; top: ;

and then tabbing could select the comment… Although, fuzzy matching would be a bit minimal in a Snippet!

0 Likes
#12

The below is very much a first draft, but it kinda works…

Type propx and TAB to kick start and it appears like this: / abbrev : Type two letters /

Overtype the word abbrev with letters, such as le for left, wi width, pa padding, etc. Typing: po ab le 4px pa 5px4 ff Arial p yields this:

/* po ab le 4px pa 5px4 ff Arial p : PAdding POsition */; position: absolute; left: 4px; padding: 5px px px px; font-family: Arial
Notice the ‘p’ after the word ‘Arial’, which displays the help text ‘PAdding POsition’ to indicate the available abbreviations.

Typing a number 4 after px, pt, %, etc., repeats it four times.

It’s not perfect - I still end up with a spurious semi-colon at the end of the line; I need to type ’ ;’ (space semi-colon) if I want to terminate the last (empty) property with a semi-colon; and I can’t (currently) use quotation marks around fonts. But otherwise it’s perfect :laughing:

I would be pleased if someone might have a look and pass comments. Regards, Andy.

PS I wonder if there is a limit to the size of a Snippet?

<snippet> <content><![CDATA[${2:/* ${1:abbrev} : ${1/(abbrev)|.*(?:\b| )((a)|(b)|(c)|(d)|(f)|(h)|(l)|(m)|(p)|(r)|(s)|(t)|(v)|(w)|(z)).?$|.*/?1:Type two letters:?3:ABsolute:?4:BOttom BorderWidth:?5:CLIp COlor CUrsor CLear:?6:DIsplay:?7:Font-Family FIxed FLoat FOnt:?8:HEight:?9:LEft:?10:MArgin:?11:PAdding POsition:?12:RElative RIght:?13:STatic:?14:TOp:?15:VIsibility:?16:WIdth:?17:Z-Index/i} */}${1/\\|abbrev|(?:\b| )([abcdfhlmpr]{1}|(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>

0 Likes
#13

Sorry, this is better - I’ve move the comment marks /* */ out of the field, so that completions don’t keep popping up all the time (which is very annoying):

<snippet> <content><![CDATA[/* ${1:abbrev} : ${1/(abbrev)|.*(?:\b| )((a)|(b)|(c)|(d)|(f)|(h)|(l)|(m)|(p)|(r)|(s)|(t)|(v)|(w)|(z)).?$|.*/?1:Type two letters:?3:ABsolute:?4:BOttom BorderWidth:?5:CLIp COlor CUrsor CLear:?6:DIsplay:?7:Font-Family FIxed FLoat FOnt:?8:HEight:?9:LEft:?10:MArgin:?11:PAdding POsition:?12:RElative RIght:?13:STatic:?14:TOp:?15:VIsibility:?16:WIdth:?17:Z-Index/i} */${1/\\|abbrev|(?:\b| )([abcdfhlmpr]{1}|(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>

0 Likes
#14

Very interested here, I’m keeping an eye on this thread.
It would be nice to be able to delete the commented first line after your finished though. I have a very strict comment code for my files… :
And a possibility to add normal css tags and values, because not all tags are supported as of now. Suppose I want to add “border: 12px”, typing that would cause the propx conversion of the abbreviations to stop…

edit
nevermind the line deleting, ST’s “ctrl+l” doest that just fine.

0 Likes
#15

Hello dreagan.

There are no border properties as yet, although there are a few values such as ‘relative’, ‘absolute’. I can create abbreviations such as bor, bbc, etc., and a collection of standard values, such as ‘none’, ‘auto’, ‘medium’. I’ll look at this tonight.

I’m just wondering if there is a size limitation to one Snippet(?). Andy.

0 Likes
#16

Have you considered implementing the expansion of the lightweight syntax, which seems to be the cool part, as a plugin with an input panel?

You have to open a panel and press enter to commit but that’s round about as expensive as propx->tab yeah?

(Note you can also use the insert_snippet command to insert snippets )

You wouldn’t have to worry about commenting or cleaning up the abbreviation.

Also, if you implemented it as an on_change, (possibly) undo last expansion and expand type thing, you’d get more immediate feedback.

You could implement fuzzy matching too. I like the lightweight syntax but the regex seems like a gimick to me.

0 Likes
#17

@castles_made_of_sand Hello.

I haven’t delved into plug-ins (or Python) as yet, but I’m planning to. I’ve had this Python book for ages but I’m too lazy to read it… I think I can pretty much grab what I need just be reading some existing files.

I’ve squeezed these regular expressions quite a bit, but I’m sure there’s a little life there yet… But I should probably give up searching (for the sake of my sanity).

Regards, Andy,

0 Likes
#18

This is coming along quite nicely - I even managed to incorporate a negative-lookbehind, whehay!

I managed to incorporate a 3 or 4 multiplier in pretty much one statement :sunglasses:. That is, if you type: 12px3
it will give: 12px px px

but 12px4 adds the extra px. I don’t think I’ll bother with 2, it’s just as easy to type both.

I’ve put all the borders in as well. bo border, bl border-left, bc border-color, etc. If you type bb-color (or bb-style, bb-width) it will add these terms after border-bottom. You have to type color/width/style in full, but at least you can create them in situ.

There are still a number of properties missing - including background, and variations on padding and margins - but it’s coming along. It’s also cool that the line can be edited - as long as you remain within the field. Once you’ve completed, press TAB and then Ctrl-Shift-K to delete the line.

<snippet> <content><![CDATA[/* ${1} : ${1/($)|.*(?:\b| )((\-[a-z]{0,4})|(a)|(b)|((?<!\-)(?:c|co))|(d)|(f)|(h)|(l)|(m)|(p)|(r)|((?<!\-)s)|(t)|(v)|((?<!\-)w)|(z)).?$|.*/?1:Type to for top etc., followed by a space:?3:-color -style -width:?4:ABsolute:?5:BOTtom BOrder BorderBottom BC BL BR BS BT BW -color -style -width:?6:CLIp COlor CUrsor CLear:?7:DIsplay:?8:Font-Family FIxed FLoat FOnt:?9:HEight:?10:LEft:?11:MArgin:?12:PAdding POsition:?13:RElative RIght:?14:STatic:?15:TOp:?16:VIsibility:?17:WIdth:?18:Z-Index/i} */$0${1/\\|abbrev|(?:\b| )([abcdfhlmpr]{1}|(ab)|(bb(\-)(color|style|width)|bb)|(bc)|(bl(\-)(color|style|width)|bl)|(br(\-)(color|style|width)|br)|(bs)|(bt(\-)(color|style|width)|bt)|(bw)|(bot)|(bo)|(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)|3))( |$)|( {2,}|\t)/?2:absolute:?3:;\nborder-bottom$4$5\: :?6:;\nborder-color\: :?7:;\nborder-left$8$9\: :?10:;\nborder-right$11$12\: :?13:;\nborder-style\: :?14:;\nborder-top$15$16\: :?17:;\nborder-width\: :?18:;\nbottom\: :?19:;\nborder\: :?20:;\nclip\: :?21:;\ncolor\: :?22:;\ncursor\: :?23:;\nclear\: :?24:;\ndisplay\: :?25:;\nfont-family\: :?26:fixed:?27:;\nfloat\: :?28:;\nfont\: :?29:;\nheight\: :?30:;\nleft\: :?31:;\nmargin\: :?32:;\npadding\: :?33:;\nposition\: :?34:relative:?35:;\nright\: :?36:static:?37:;\ntop\: :?38:;\nvisibility\: :?39:;\nwidth\: :?40:;\nz-index\: :?41:$41$42 $42 $42:?44: $42/gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

0 Likes
#19

I even managed to incorporate a negative-lookbehind, whehay!

And so begins the legend of the propx declaration of 2012

0 Likes
#20

In file with css syntax press ctrl+alt+enter, write something like this pos:a+t+l+d:b this will transform in

position:absolute; top:; left:; display:block;
Same will happen if you will type it inline and press tab.

So maybe it will be easier to adjust existing zen-coding tool to allow something like this pos:a+t{10px}+l{15px}*+d:b*? Right now it is almost working except for values being after ‘;’:

position:absolute; top:;10px left:;15px display:block;
Sorry, but I like it much better than propx syntax… :unamused:

0 Likes