Sublime Forum

Addition to CSS zen coding

#33

… actually, going back to a comment made by dreagan, if I split this into a few fields, rather than the current one, then I would be able to supply all the standard values for each property, and have properties appear in a certain order. (The only values that appear at the moment are absolute, relative, fixed and static - for position.)

But I just feel that I would be re-drafting ZenCoding (even more than I have already). I must move on… :wink:

0 Likes

#34

Man, that’s one mother of all regex snippets! You may as well get contextual expansions working: n => none after display:etc

0 Likes

#35

I was originally considering this, which is partly why I included absolute, relative. As mentioned, it would mean introducing more fields, which would in turn mean certain properties appearing at the top or bottom of the list. But I already have a completions file to help will values :wink:

A (cool), and easier, alternative occurred to me. I can type ‘bs’ for ‘border-style’ but if I then type ‘bs_’ I could have another line appearing immediately underneath listing the available values! This line could disappear after typing another character, or could remain until the underscore is deleted, or another underscore is used.

I would still have to type the value, but still… I still want to move on to other things, but I might play with this idea for a bit :smile:

0 Likes

#36

I still want to move on to other things

It’s pretty cool what you’ve been able to do with a little regex and some persistence :smile:

Personally, I’d like to see a snippet templating language implemented in python with transformations/includes etc.

0 Likes

#37

[quote=“castles_made_of_sand”]It’s pretty cool what you’ve been able to do with a little regex and some persistence :smile:

Personally, I’d like to see a snippet templating language implemented in python with transformations/includes etc.[/quote]

Thank you. Such a template wouldn’t be quite as interesting though?

My underscore idea works really well. I don’t need it to keep jumping to a second line, it just replaces the current help text on the same line. It disappears after typing two more characters, and I don’t even need to delete the underscore :laughing:

BTW I was a little (a lot!) ambitious thinking I could just examine a few python files to steer me towards creating a plug-in. But I shouldn’t need to spend hours and hours studying Python and the Plugins API. I just need a kick-start.

How do I read input from the console? How do I trap the onchange event? How do I send output to the view, and console?

I anticipate the trickiest thing would be dealing with Backspace or the user repositioning the cursor :astonished:

0 Likes

#38

Such a template wouldn’t be quite as interesting though?

What you mean? Not as much fun to try and push to the limit?

0 Likes

#39

Hey! That’s my job! :smile:

haha… you’re sooo mad that someone disagrees with you :smile:

0 Likes

#40

GGRRRRR… haha Not really. I think you are projecting your rage :smile:

Was a serious question. Was wondering why it wouldn’t be so interesting to him. Regex declarative transformations and Python imperative templates would be diff solutions to the same problem The latter would be more verbose but I guess more flexible.

There’s a certain challenge like fun I’d imagine from doing stuff with the regexes.

0 Likes

#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