How to loop with a var?

[corysimmons]

With precss I can:

@for $i from 1 to 6 {
  &:nth-child($(i)) {
    width: myPostCSSPlugin(1 2 3)[$(i)];
  }
}

But I can't figure out how to do this with sugarss. SugarSS have official API docs anywhere?

[ai]

You need to add PreCSS (pack of PostCSS plugins for mixins/loops and other preprocessor stuff)

https://github.com/jonathantneal/precss

SugarSS is just a syntax. It have no any other magic.

[corysimmons]

What's the syntax for for loops in SugarSS?

I tried

.stylus-syntax
  for $i in 1..6
    width: $i

and

.scss-syntax {
  @for $i from 1 to 6 {
    width: $i;
  }
}

I also tried these with the $i wrapped like precss prefers $(i) to no avail.

[ai]

Let’s start from basis:

1. SugarSS has no any features. It is a syntax to write CSS and CSS-like files. With any features. SugarSS doesn’t unwrap nested rules. It doesn’t compile variables, etc. It only parse properties, rules and at-rules.
2. But PostCSS has other plugins to compile variables, loops and nested rules.
3. There is a PreCSS plugins pack with all preprocessors like features.
4. You can use PreCSS (or any other PostCSS plugin) with SugarSS.
5. PreCSS has @each and @for loops. There is no special syntax for them. They just custom at-rule.

[ai]

So, if you want to do loop:

Step 1. You should go to PreCSS repo and find loop plugin syntax:

@each $icon in (foo, bar, baz) {
    .icon-$(icon) {
        background: url('icons/$(icon).png');
    }
}

Step 2. This example is in CSS. You need to convert it to SugarCSS. It is easy, because it is just at-rule with each name:

@each $icon in (foo, bar, baz)
  .icon-$(icon)
    background: url('icons/$(icon).png')

[ai]

Your example in SugarSS with PreCSS will be:

@for $i from 1 to 6
  width: $i

[corysimmons]

@ai Thanks bro.