Query: Is right-aligning content+token possible? #6

Closed
oli opened this Issue Jun 6, 2012 · 4 comments

Projects

None yet

2 participants

@oli
oli commented Jun 6, 2012

I’d like to right-align everything before the token to the token, for two tokens per line. For example:

.postcard:hover {
  -webkit-transition-property: -webkit-transform;
     -moz-transition-property:    -moz-transform;
      -ms-transition-property:     -ms-transform;
       -o-transition-property:      -o-transform;
          transition-property:         transform;
}

This would make changing values via column selection really easy, but I can’t see how to do it in the settings (or even if it’s possible to do).

Thanks for your time.

@khiltd
Contributor
khiltd commented Jun 6, 2012

Not a fan of that style at all since it makes columnar selections impossible (and that's easily the biggest reason to align things in the first place), but it's certainly possible if you want to fork.

@khiltd khiltd closed this Jun 6, 2012
@oli
oli commented Jun 6, 2012

I’m sorry but I don’t understand — the only reason for this alignment is columnar selections. For example to change from transform to transform-origin, or to change from transition-property to transition. Currently, using Abacus means columnar selections can’t be used to change vendor-prefixed CSS values, e.g. I’d need to use something else (like Find&Replace) to change the color values here:

div { /* default Abacus alignment */
  background-color: /* fallback color */;
  background-image: -webkit-linear-gradient(-90deg, #000, #fff);
  background-image: -moz-linear-gradient(-90deg, #000, #fff);
  background-image: -ms-linear-gradient(-90deg, #000, #fff);
  background-image: -o-linear-gradient(-90deg, #000, #fff);
  background-image: linear-gradient(-90deg, #000, #fff);
}

Changing to right-aligning means we can also change the colors with a columnar selection:

div {
  background-color: /* fallback color */;
  background-image: -webkit-linear-gradient(-90deg, #000, #fff);
  background-image:    -moz-linear-gradient(-90deg, #000, #fff);
  background-image:     -ms-linear-gradient(-90deg, #000, #fff);
  background-image:      -o-linear-gradient(-90deg, #000, #fff);
  background-image:         linear-gradient(-90deg, #000, #fff);
}
@khiltd
Contributor
khiltd commented Jun 6, 2012

That's perfectly fine if that's your preference, and I'd be more than happy to merge such an option in if you or anyone else wanted to add it to the plugin, but I absolutely hate it so I'm not likely to spend time writing something I won't ever use myself.

Odds are good you can just throw a call to rjust() in there and have exactly what you want, but I haven't tried it.

@khiltd
Contributor
khiltd commented Jun 6, 2012

This would also make the altogether more common situation where you have an exceptionally lengthy procession of -x-linear-gradient or -x-box-shadow properties producing a composite visual completely unhandleable as your shorter rules would be shoved hard right off the edge of the page by the ridiculously lengthy ones.

Such an alignment method has little value outside of CSS, and even then, it's not something anyone would want all the time unless their stylesheets are decidedly simplistic. Given the complexity of the decision making process involved in determining whether to align left or align right in this one edge case, I'm perfectly comfortable letting people who want to make weird little inverted pyramids do it manually.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment