Snippet Variables?

Question

Is there any way that we can create snippets in Atom with variables (someway like Emmet did in HTML)?

Here's an example that we want to achieve:

From: p4

To: padding: 4% 4% 4% 4%

( From: p[i] to padding: i% i% i% i% ) (the user input p+[i] , i is variable )

For me it's not really clear, what is the difference from $1 that you can use in snippet. Please add some more explanation — Sergii Bishyr
– Sergii Bishyr, Commented Jan 9, 2017 at 11:29
It's like: if you press in "p4" , the result will be "padding 4% 4%" . If you press in "p5" , the result will be "padding 5% 5%" . Something like that :) — Lan Mai
– Lan Mai, Commented Jan 9, 2017 at 16:01

Citizen Coder · Accepted Answer · 2017-02-21 22:30:09Z

2

To my knowledge you are not able to do that with Atom snippets because they are composed with just CSON (i.e. no scripting). So while you can't do that you can use a single variable and expand it into multiple locations in your snippet, something I learned in this blog that I read here

Taken from that post, here is example CSON to do that:

'.source.css':
   'Padding With Mostly Identical Values':
     'prefix': 'pwmiv'
     'body': 'padding: ${1:num}px ${1:num}$2px ${1:num}$3px ${1:num}$4px;'

Looking at it, it looks like you can also tab through each placeholder to edit any paddings that need to be different.

edited Feb 21, 2017 at 22:30

answered Feb 21, 2017 at 16:26

Citizen Coder

364 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Snippet Variables?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related