Slippry example thumbnails (graphics carousel) - css

Question

http://slippry.com/examples/thumbnails/
I'm trying to recreate the thumbnails example.
The css quoted is in sass format.
I've not used sass before.
Is anyone able to convert this to sass (from example page)?
I had a quick attempt at http://www.sassmeister.com and failed.
* Thumbnails */
.thumb-box {
padding: 1.4em 0 1em;
margin-left: -1%;
width: 102%;
.thumbs {
#include clearfix;
li {
float: left;
width: 25%;
text-align: center;
padding: 0 1%;
img {
width: 100%;
opacity: .8;
#include transition(opacity .32s);
border-bottom: 4px solid transparent;
&.active {
border-color: $bc-rk-blue;
opacity: 1;
}
}
&:hover {
img {
opacity: 1;
#include transition(opacity .2s);
}
}
}
}
}

Answer 1

used http://www.sassmeister.com/
found the 2 #mixins.
I could not find $bc-rk-blue; so just changed it to blue
This is the output:
/* Thumbnails */
#import "compass";
#mixin grouped-trans($list, $time, $ease) {
#include transition-property($list);
#include transition-duration($time);
#include transition-timing-function($ease);
}
#mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.thumb-box {
padding: 1.4em 0 1em;
margin-left: -1%;
width: 102%;
.thumbs {
#include clearfix;
li {
float: left;
width: 25%;
text-align: center;
padding: 0 1%;
img {
width: 100%;
opacity: .8;
#include transition(opacity .32s);
border-bottom: 4px solid transparent;
&.active {
border-color: blue;
opacity: 1;
}
}
&:hover {
img {
opacity: 1;
#include transition(opacity .2s);
}
}
}
}
}