I'm a fiction writer how want to learn a little bit of programming. So please forgive me all "goofiness" of my questions.
I'm in love with Squiffy. It teaches me how code became alive. Thank you for this simply awsome tool!
MY PROBLEM: I want made different color links with :rotate effect. And I want to choose which links will by colorized.
I used solution from here.

A.class1 {color:red;}
A.class1:link  {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}


A.class2 {color:blue;}
A.class2:link {text-decoration: none; color: blue;}
A.class2:visited {text-decoration: none; color: blue;}
A.class2:hover {text-decoration: underline; color: blue;}
A.class2:active {text-decoration: none; color: blue;}

I put this code in my CSS but I dont know how to implement it to rotate-link in my.squiffy file. (?)

"EXEMPLE":

<a class="class1">{rotate:var1:var2}</a>
<a class="class2">{rotate:varA:varB}</a> 

You can't embed HTML inside a {rotate}, so we'll have to do this the long way! You can use text replacement to get the same effect.

First, add the CSS. We'll be using <span> elements instead of <a> tags, so the CSS just needs to be:

.class1 {color:red;}
.class2 {color:green;}
.class3 {color:yellow;}

This needs to be added to style.template.css. Here's the full file - just save it as style.template.css in the same directory as your .squiffy file:

.class1 {color:red;}
.class2 {color:green;}
.class3 {color:yellow;}

a.squiffy-link
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}
a.squiffy-link.disabled
{
    text-decoration: inherit;
    color: inherit !important;
    cursor: inherit;
}
a.squiffy-header-link
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}
div#squiffy-container
{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, serif;
}
div#squiffy-header
{
    font-size: 14px;
    text-align: right;
}
div#squiffy-output
{
    font-size: 18px;
}
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px; margin-bottom: 16px;
}

Here's a test squiffy file that uses the above:

[[one]]:
{label:1=[<span class="class1">one</span>](@replace 1=two)}

[[two]]:
{label:2=[<span class="class2">two</span>](@replace 1=three)}

[[three]]:
{label:3=[<span class="class3">three</span>](@replace 1=one)}

Kind of clunky, but it works.

Actually, there's a slightly simpler way - you don't need to do anything with style.template.css if you just include the CSS styling in-line.

Also I realised I was duplicating the labels for no reason.

So this will work, without needing to change any other files:

[[one]]:
{label:1=[<span style="color:red">one</span>](@replace 1=two)}

[[two]]:
[<span style="color:green">two</span>](@replace 1=three)

[[three]]:
[<span style="color:yellow">three</span>](@replace 1=one)

It is clunky. And works good. Thank you. Unfortunately in my opinion:suppose for rotating more than 10 possibilities is not good way(?).
But incidentally you gave my inspiration to write this line:

{label:A=[<span style="color:blue">SOME</span>](@replace A=<span title="HAPPEN!" style="color:red">THING</span>)}

Something that changes one word in second word and gives them different color + hover title:message for second word.
I was thought about something like this b-side "the rotate-link problem" and Voila! You answer before I write question...

Is there a way to loop it like in the rotate effect?

Not sure what you're asking... you can rotate using the @replace syntax as I have shown in my example - the final passage called "three" replaces the text with the "one" passage.

You can use a section or passage name after @replace, or the text itself (as in your SOME -> THING example). The only way to rotate here is to use named sections or passages after @replace.

Oooo you have right... First time when I use your solution the final passage wasn't replaced first text. Sorry, my mistake.
Still I want write simple and readable code even for people how don't have any programming knowledge.
So in a battle...

{rotate:simple:till:some:thing:happen!}

VS.

[[one]]:
{label:1=[<span style="color:red">one</span>](@replace 1=two)} (...) 

...my favorite is rotate effect even if I cannot colorize it.

It does't change the fact that your solution helped me a lot in developing my other ideas. Thanks again!