Sublime Forum

Wrap CSS in a selector

#1

Is there a shortcut to wrap a CSS selector inside of another selector? Opt + Shift + W – wraps selection with an HTML tag. I would like to be able to do the same with CSS, IE (in absurdly simple example):

&.one {
  	background: url('/design/images/welcome-social-fb-in.png') center 0px no-repeat;
}
&.two {
  	background: url('/design/images/welcome-social-fb-go.png') center top no-repeat;
}

becomes:

a { &.one { background: url('/design/images/welcome-social-fb-in.png') center 0px no-repeat; } &.two { background: url('/design/images/welcome-social-fb-go.png') center top no-repeat; } }

0 Likes

#2

This will be possible in the latest BracketHighlighter (BracketHighlighter highlights brackets, but also has a number of plugins that do bracket related things, wrapping is a new one I added). It will actually allow you to configure any kind of wrapping you would like. It is currently in BETA though. Basically, you define your wrapping definitions, and then you can access a menu of all your wrapping options for a given syntax and your selection(s) will be wrapped with what you do define. It allows things tab stops allowing you to have generic places you can tab to and change once it wraps your info.

There is absolutely no documentation yet on it unfortunately, but if you want to play around with the BETA branch, it it is here github.com/facelessuser/Bracket … r/tree/BH2 if I get a bit more time later, I can provide an example to that would do what you have illustrated in your question. There may be other plugins that also already handle this stuff as well, so this is probably not your only option.

0 Likes