滑動示例縮略圖（圖形輪播）

Question

http://slippry.com/examples/thumbnails/

我試圖重新創建縮略圖示例。 引用的css格式爲sass格式。 我以前沒有用過sass。

是任何人都可以將它轉換爲（從例如網頁）上海社會科學院？

我有一個快速的嘗試在http://www.sassmeister.com和失敗。

* 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

使用http://www.sassmeister.com/

發現2個@mixins。 我找不到$ bc-rk-blue;所以只是將其改爲藍色 這是輸出：

/* 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); 
     } 
     } 
    } 
    } 
}