Question

我试图重新创建缩略图示例。引用的css是sass格式。我之前没有使用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);
        }
      }
    }
  }
}

Slippry示例缩略图（图形轮播）

1 个答案: