Sublime Forum

Addition to CSS zen coding

#41

Yes, it’s been both fun and challenging :astonished: :smile: I omitted a character a couple of times, and it crashed straight out of ST!

0 Likes
#42

OT:
castle can i help u with zen developing in some ways?
end OT

the same to u agib

0 Likes
#43

Thank you Fed03, but I’m just dabbling :sunglasses:

The below might just qualify as the maddest Snippet seen! If you type ‘bbs’ it will output ‘border-bottom-style’. When you follow this with a space it will display a list of appropriate values. These values will disappear as soon as you type another character. However, if you follow ‘bbs’ with an underscore _ then the values will remain displayed as you type (up to 8 characters).

/* bbs_dash style: dashed dotted double groove inset outset ridge solid none hidden */; border-bottom-style: dash;
I’ve split the comment over two lines - it looks more professional and doesn’t keep jumping between one and two lines. It does mean that you now have two lines to delete, but I figure if you’re using this at all then you’re likely to key a number of properties at once (so deleting two lines is not such an issue). (Hint: press Escape, then Ctrl-Shift-K twice to delete these lines.)

Definitely finished now!! :smiley:

<snippet> <content><![CDATA[/* ${1} ${1/($)|.*(?:^| )((b)|(c)|(d)|(e)|(f)|(h)|(l)|(m)|(o)|(p)|(q)|(r)|(t)|(v)|(w)|(z)).?$|.*/?1:Type to for top etc, followed by a space:?3:BAckground-Attach etc BOTtom BOrder-Collapse-Spacing-Bottom\(Color\/Style\/Width\) etc BC BS BW:?4:CLear CLIp COlor CONtent CUrsor Counter-Inc-Reset Caption-Side:?5:DIsplay DIRection:?6:Empty-Cells:?7:FOnt F-Family-SI\/ST\/W\/V FLoat:?8:HEight:?9:LEft LEtter-Spacing Line-Height List-Style I\/P\/T:?10:MArgin T\/R\/B\/L MAx\/MIn-Height\/Width:?11:OUtline-Color-Style-Width OVerflow:?12:PAdding T\/R\/B\/L POsition-Abs\/Rel\/Fixed\/Static:?13:QUotes:?14:RIght:?15:TOp TExt-Align\/D\/I\/T:?16:Vertical-Align VIsibility:?17:WHite-space WIdth WOrd-spacing:?18:Z-Index/i}${1/($)|.*(?:\b| )((baa)|(bap)|(bar)|((b[trbl]?s)|(ous))|(b[trbl]?w|ouw)|(boc)|(cl)|(cu)|(cs)|(dir)|(di)|(ec)|(fl)|(fsi)|(fst)|(fv)|(fw)|((bot|to|le|ri|he|wi|mat|mar|mab|mal|ma)|(mah|maw)|mih|miw|pa[trbl]?|tei)|((lh)|ls)|(lsi)|(lsp)|(lst)|(ov)|(tea)|(ted)|(tet)|(va)|(vi)|(wh)|(wo)|(zi))( |_[a-z0-9-]{0,8})$|.*/?3:attachment\: fixed scroll:?4:left center right bottom center top:?5:repeat no-repeat repeat-x repeat-y:?6:style\: dashed dotted double groove inset outset ridge solid none(?7: hidden):?9:width\: thin thick medium:?10:collapse separate:?11:left right both:?12:default pointer crosshair move *-resize text wait help progress auto:?13:top bottom:?14:ltr rtl:?15:inline inline-block list-item run-in table-cell-column-row -header-footer -group none:?16:show hide:?17:left right none:?18:smaller larger x\(x\)-small-large medium:?19:italic oblique normal:?20:small-caps normal:?21:bold bolder lighter normal xxx:?22:length percentage(?23: auto:?24: none):?25:length percentage (?26:number )normal:?27:none:?28:inside outside:?29:disc circle square decimal-leading-zero lower-upper-greek-latin-roman armenian georgian:?30:visible hidden scroll auto:?31:left center right justify:?32:underline overline line-through blink none:?33:uppercase lowercase capitalize none:?34:baseline sub super top text-top middle bottom text-bottom length percentage:?35:visible hidden collapse:?36:nowrap pre pre-wrap pre-line normal:?37:length normal:?38:integer auto/gi } */$0${1/\\|(?:\b| )((ba((a)|(c)|(i)|(p)|(r))?)|(bot)|(bo((c)|(s))?)|(((bb)|(bl)|(br)|(bt)|b)((c)|(s)|(w))?)|(cli)|(con)|(co)|(cu)|(cl)|(c((i)|(r)))|(cs)|(dir)|(di)|(ec)|((ff)|(fsi)|(fst)|(fv)|(fw)|fo)|(fl)|(he)|(les)|(le)|(lh)|(ls((i)|(p)|(t))?)|(((ma)|(mi))((h)|(w)))|(((ma)|(pa))((b)|(l)|(r)|(t))?)|(ou((c)|(s)|(w))?)|(ov)|(po((a)|(r)|(f)|(s))?)|(qu)|(ri)|(to)|(te((a)|(d)|(i)|(t)))|(va)|(vi)|(wh)|(wi)|(wo)|(zi)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)((4)|3))( |_|$)|( {2,}|\t)/?2:;\nbackground(?4:-attachment:?5:-color:?6:-image:?7:-position:?8:-repeat)\: :?9:;\nbottom\: :?10:;\nborder(?12:-collapse:?13:-spacing)\: :?14:;\nborder(?16:-bottom:?17:-left:?18:-right:?19:-top)(?21:-color:?22:-style:?23:-width)\: :?24;\nclip\: :?25:;\ncontent\: :?26:;\ncolor\: :?27:;\ncursor\: :?28:;\nclear\: :?29:;\ncounter-(?31:increment:?32:reset)\: :?33:;\ncaption-side\: :?34:;\ndirection\: :?35:;\ndisplay\: :?36:;\nempty-cells\: :?37:;\nfont(?38:-family:?39:-size:?40:-style:?41:-variant:?42:-weight)\: :?43:;\nfloat\: :?44:;\nheight\: :?45:;\nletter-spacing\: :?46:;\nleft\: :?47;\nline-height\: :?48:;\nlist-style(?50:-image:?51:-position:?52:-type)\: :?53:;\n(?55:max:?56:min)(?58:-height:?59:-width):?60:;\n(?62:margin:?63:padding)(?65:-bottom:?66:-left:?67:-right:?68:-top)\: :?69:;\noutline(?71:-color:?72:-style:?73:-width)\: :?74:;\noverflow\: :?75:;\nposition\: (?77:absolute:?78:relative:?79:fixed:?80:static):?81:;\nquotes\: :?82:;\nright\: :?83:;\ntop\: :?84:;\ntext(?86:-align:?87:-decoration:?88:-indent:?89:-transform)\: :?90:;\nvertical-align\: :?91:;\nvisibility\: :?92:;\nwhite-space\: :?93:;\nwidth\: :?94:;\nword-spacing\: :?95:;\nz-index\: :?96:$96$97 $97 $97:?99: $97/gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>

0 Likes
#44

Here is a help-text Snippet for propx, which I suggest naming ‘propxh’ (so it appears second in the completion list). It creates commented text. However, it’s probably largely unnecessary.

<snippet> <content><![CDATA[/* propx uses two or three letter abbreviations for many of the css properties, separated by a space. For example, 'to' for top, 'po' for position, 'bbc' for 'border-bottom-color'. You can type values between the abbreviations, but you cannot use quotes, colons or brackets. After you type an abbreviation (and a space) a list of values will be shown. This list will disappear as soon as you type another character, or follow your abbreviation with an underscore to keep the list visible. If you need to type an abbreviation such as 'le', just split it with a back-slash: 'l\e'. Typing, for example, '3px3' will produce '3px px px', similarly for '3px4'. This works for ems, etc, and percentages. You can backspace as you type, and even edit the line, as long as you remain within the field. Once you've finished, press Escape then Ctrl-Shift-K twice to delete the comment. */ ]]></content> <tabTrigger>propxh</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>propx help</description> </snippet>

0 Likes
#45

[quote=“Fed03”]OT:
castle can i help u with zen developing in some ways?
end OT[/quote]

Definitely :smile: I’ll get back to you when I got the time to steer you.

Right now I got a fuzzy todo list in my head even more fuzzily approximated in some notes / comments / docstrings.

That and no real chunk of time just atm

0 Likes
#46

@castles
Thank you for your assistance recently. I should also, and am happy to, offer my assistance. But this is perhaps a token gesture :wink: as I am only now beginning to look at Python and the plug-ins API. But I could always test things and offer (polite!) suggestions?

{ Python looks wrong to my eye - without a } it lacks *closure * :laughing: }

BTW I added two neat little touches to my Snippet: following a value with ! adds ’ !important’, and finishing with a full-stop ‘.’ collapses the two comment lines into one. But I’m sure readers are bored with my frequent updates - I might wait until someone expresses an interest.

Regards, Andy.

0 Likes
#47

I’m not bored with frequent updates. Updates mean that it’s still evolving, still being toyed with. I love to read how it changed over the last couple of days.

0 Likes
#48

Hello, and I appreciate your interest.

Typing ! immediately after a property-value appends ’ !important’ (even though this isn’t generally recommended!). Ending with a full-stop collapses the two comment lines to one - then pressing TAB (or Escape) followed by Ctrl-Shift-K makes it slightly easier to delete the comment. But typing the full-stop is optional.

<snippet> <content><![CDATA[/* ${1} ${1/.*(\.)$|.*/?1::\n/}${1/($)|.*(?:^| )((b)|(c)|(d)|(e)|(f)|(h)|(l)|(m)|(o)|(p)|(q)|(r)|(t)|(v)|(w)|(z)).?$|.*/?1:Type to for top etc, followed by a space:?3:BAckground-Attach etc BOTtom BOrder-Collapse-Spacing-Bottom\(Color\/Style\/Width\) etc BC BS BW:?4:CLear CLIp COlor CONtent CUrsor Counter-Inc-Reset Caption-Side:?5:DIsplay DIRection:?6:Empty-Cells:?7:FOnt F-Family-SI\/ST\/W\/V FLoat:?8:HEight:?9:LEft LEtter-Spacing Line-Height List-Style I\/P\/T:?10:MArgin T\/R\/B\/L MAx\/MIn-Height\/Width:?11:OUtline-Color-Style-Width OVerflow:?12:PAdding T\/R\/B\/L POsition-Abs\/Rel\/Fixed\/Static:?13:QUotes:?14:RIght:?15:TOp TExt-Align\/D\/I\/T:?16:Vertical-Align VIsibility:?17:WHite-space WIdth WOrd-spacing:?18:Z-Index/i}${1/($)|.*(?:\b| )((baa)|(bap)|(bar)|((b[trbl]?s)|(ous))|(b[trbl]?w|ouw)|(boc)|(cl)|(cu)|(cs)|(dir)|(di)|(ec)|(fl)|(fsi)|(fst)|(fv)|(fw)|((bot|to|le|ri|he|wi|mat|mar|mab|mal|ma)|(mah|maw)|mih|miw|pa[trbl]?|tei)|((lh)|ls)|(lsi)|(lsp)|(lst)|(ov)|(po)|(tea)|(ted)|(tet)|(va)|(vi)|(wh)|(wo)|(zi))( |_[a-z0-9-]{0,8})$|.*/?3:attachment\: fixed scroll:?4:left center right bottom center top:?5:repeat no-repeat repeat-x repeat-y:?6:style\: dashed dotted double groove inset outset ridge solid none(?7: hidden):?9:width\: thin thick medium:?10:collapse separate:?11:left right both:?12:default pointer crosshair move *-resize text wait help progress auto:?13:top bottom:?14:ltr rtl:?15:inline inline-block list-item run-in table-cell-column-row -header-footer -group none:?16:show hide:?17:left right none:?18:smaller larger x\(x\)-small-large medium:?19:italic oblique normal:?20:small-caps normal:?21:bold bolder lighter normal xxx:?22:length percentage(?23: auto:?24: none):?25:length percentage (?26:number )normal:?27:none:?28:inside outside:?29:disc circle square decimal-leading-zero lower-upper-greek-latin-roman armenian georgian:?30:visible hidden scroll auto:?31:absolute relative fixed static:?32:left center right justify:?33:underline overline line-through blink none:?34:uppercase lowercase capitalize none:?35:baseline sub super top text-top middle bottom text-bottom length percentage:?36:visible hidden collapse:?37:nowrap pre pre-wrap pre-line normal:?38:length normal:?39:integer auto/gi} */$0${1/\\|\.$|(?:\b| )((ba((a)|(c)|(i)|(p)|(r))?)|(bot)|(bo((c)|(s))?)|(((bb)|(bl)|(br)|(bt)|b)((c)|(s)|(w))?)|(cli)|(con)|(co)|(cu)|(cl)|(c((i)|(r)))|(cs)|(dir)|(di)|(ec)|((ff)|(fsi)|(fst)|(fv)|(fw)|fo)|(fl)|(he)|(les)|(le)|(lh)|(ls((i)|(p)|(t))?)|(((ma)|(mi))((h)|(w)))|(((ma)|(pa))((b)|(l)|(r)|(t))?)|(ou((c)|(s)|(w))?)|(ov)|(po(?:(a)|(r)|(f)|(s))?)|(qu)|(ri)|(to)|(?:te((a)|(d)|(i)|(t)))|(va)|(vi)|(wh)|(wi)|(wo)|(zi)|(!)|([0-9]*)(cm|em|ex|in|mm|pt|pc|px|\%)(?:(4)|3)(!)?)( |_|\.|$)|( {2,}|\t)/?2:;\nbackground(?4:-attachment:?5:-color:?6:-image:?7:-position:?8:-repeat)\: :?9:;\nbottom\: :?10:;\nborder(?12:-collapse:?13:-spacing)\: :?14:;\nborder(?16:-bottom:?17:-left:?18:-right:?19:-top)(?21:-color:?22:-style:?23:-width)\: :?24;\nclip\: :?25:;\ncontent\: :?26:;\ncolor\: :?27:;\ncursor\: :?28:;\nclear\: :?29:;\ncounter-(?31:increment:?32:reset)\: :?33:;\ncaption-side\: :?34:;\ndirection\: :?35:;\ndisplay\: :?36:;\nempty-cells\: :?37:;\nfont(?38:-family:?39:-size:?40:-style:?41:-variant:?42:-weight)\: :?43:;\nfloat\: :?44:;\nheight\: :?45:;\nletter-spacing\: :?46:;\nleft\: :?47;\nline-height\: :?48:;\nlist-style(?50:-image:?51:-position:?52:-type)\: :?53:;\n(?55:max:?56:min)(?58:-height:?59:-width):?60:;\n(?62:margin:?63:padding)(?65:-bottom:?66:-left:?67:-right:?68:-top)\: :?69:;\noutline(?71:-color:?72:-style:?73:-width)\: :?74:;\noverflow\: :?75:;\nposition\: (?76:absolute:?77:relative:?78:fixed:?79:static):?80:;\nquotes\: :?81:;\nright\: :?82:;\ntop\: :?83:;\ntext(?84:-align:?85:-decoration:?86:-indent:?87:-transform)\: :?88:;\nvertical-align\: :?89:;\nvisibility\: :?90:;\nwhite-space\: :?91:;\nwidth\: :?92:;\nword-spacing\: :?93:;\nz-index\: :?94: !important:?95:$95$96 $96 $96(?97: $96)(?98: !important)/gi}; ]]></content> <tabTrigger>propx</tabTrigger> <scope>source.css meta.property-list.css</scope> <description>po to, etc</description> </snippet>
The extra semi-colon (after the comment) bugs me a little. I should ignore it - after all, we have to delete the line anyway. But I’m a bit obsessive about such things :astonished:

I would like to be able to type apostrophes and brackets ( ), but I don’t think this is possible within a single Snippet. Typing these characters runs macros, which breaks out of the Snippet. I think the user would have to change their settings (key-bindings) to enable this.

Regards, Andy.

0 Likes
#49

[quote=“castles_made_of_sand”]Have you considered implementing the expansion of the lightweight syntax, which seems to be the cool part, as a plugin with an input panel?

(Note you can also use the insert_snippet command to insert snippets ) [/quote]

How can I call ‘insert_snippet’ from within a Python file? And can I feed it text, in place of the snippets’ $1 variable?

0 Likes
#50

No worries :sunglasses:

I created a version of my Snippet that refers to the current line, and the Python code eventually deletes this line:

self.view.run_command("insert_snippet",{"name": "Packages/CSS/Andypropxs.sublime-snippet"}) cur_linef = self.view.full_line(sel) self.view.erase(edit, cur_linef)
This works great! But I’m more interested in working interactively with the console/output window. Next adventure :smiley:

0 Likes
#51

sorry, busy as shit dude!

re: inserting snippet … meant for your regex snippet so you could use a hotkey for the snippet … instead of propx-tab …

Similar to this builtin ruby jobbie …
[pre=#0C1021] { “keys”: “#”],
“command”: “insert_snippet”,
“args”: {“contents”: “#{${1:$SELECTION}}$0”} }[/pre]

more interested in working interactively with the console/output window

not quite sure what you meant there …

0 Likes
#52

Hi @castles

I’m playing with plug-ins. I can grab text from the input panel, insert it into the main view and run a version of my snippet that uses this text (via TM_CURRENT_LINE) and then deletes the line I inserted:

self.view.run_command("insert_snippet",{"name": "Packages/CSS/Andypropxs.sublime-snippet"})

But what I’d prefer to do is to pass the input text directly to the snippet as a variable, without having to create, and subsequently erase, a line of text.

Do you know if this is possible? Regards, Andy.

0 Likes