search

postcss / postcss-simple-vars

PostCSS plugin for Sass-like variables
MIT License
415 stars 36 forks source link

string interpolation #33

Closed vedam closed 8 years ago

vedam commented 8 years ago

hey, I'm switching from sass to post-css and check if it's possible to transfer my sass. With that I stumbled upon the possibility of sass-like string interpolation:

$name-one: 'my-';
$name-two: 'selector-name';

.$(name-one)$(name-two) { /* declaration */}

was in sass:

.#{$name-one}#{$name-two} { /* declaration */}

is there a way to get this done? btw. first var get's interpolated

trungtin commented 8 years ago

And another example that currently not working:

$alpha-color: #111;
$beta-color: #222;
$gamma-color: #333;

@each $name in (alpha, beta, gamma){
  view-content {
    color: $($(name)-color);
  }
}
ai commented 8 years ago

@trungtin recursive interpolation will not be able until we implement Event based API https://github.com/postcss/postcss/issues/296

ai commented 8 years ago

@vedam your code should work. Maybe we have issue somewhere. I will try to find it today.

ai commented 8 years ago

@vedam everything fine. Just remove ' from values.

Input:

$name-one: my-;
$name-two: selector-name;

.$(name-one)$(name-two) { /* declaration */}

Output:

.my-selector-name { /* declaration */}
vedam commented 8 years ago

ha, you're right. Sorry for the trouble. Worked. Thx for your help.