Closed corysimmons closed 8 years ago
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.
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.
Let’s start from basis:
@each
and @for
loops. There is no special syntax for them. They just custom at-rule.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')
Your example in SugarSS with PreCSS will be:
@for $i from 1 to 6
width: $i
@ai Thanks bro.
With precss I can:
But I can't figure out how to do this with sugarss. SugarSS have official API docs anywhere?