0

我有一组数据行，每行显示为（标签+值）的平铺。我把它们包装在一个div.tilemap-tile

<div class="tilemap">
  <div class="tilemap-tile" ng-repeat="x in data | orderBy: 'value'">
    <div class="data-label">{{x.label}}</div>
    <div class="data-value">{{x.value}}</div>
  </div>
</div>

我想在 Nx3 或 Nx4 样式的网格中显示这个 - （a）每行的标签以调色板中的不同颜色开头，并且（b）同一行中后续瓷砖的标签连续变暗。

我可以通过调整平铺属性来获得网格视觉效果

  .tilemap-tile {
    counter-reset: Z 0;
    clear: both;
    .tilemap-tile {
      counter-increment: Z;
      width: 33%;
      display: table-cell;
      float: left;
      vertical-align: top;
      height: 5em;
      .data-label {
        @include tile-bgcolor(red, counter(Z)); <<<<<<<<<<<<<<<<<<<<< PROBLEM
      }
    }
  }

我正在苦苦挣扎的是如何设置data-label. 我尝试了以下方法，但似乎counter只能在contents属性中使用。结果，下面的计算给出了一个 sass 错误。

@mixin tile-bgcolor($basecolor, $p) {
  $c: darken($basecolor, ($p % 3) * 5%);   <<<<<<<<< $p is not numeric
  &::after { content: "(debug, tile# " $p; };   <<<<< shows values 1..N
  background: $c;
  foobar: $p;                              <<< shows in browser as "counter(Z)"
}

是否有任何其他 DRY 方法来跟踪“div.tilemap-tile”计数并在 bg-color 计算中使用它？

更新

我不知道如何回复“已经有答案”的链接，但虽然有帮助，但显然不是答案。请再次查看我的问题以了解两个具体要求。根据@cinnamon 的评论，我认为没有纯 SASS/CSS 的答案。

4

1 回答 1

0

@cimmanon 指出您不能在 SASS 中使用 counter() ，因为它是 CSS 函数，而不是 SASS 函数。你的浏览器会理解它，但 SASS 编译器只是将它作为字符串输出。但是，您可以使用 SASS 和nth-child. 如果你有这样的调色板：

// add as many colors as you want; colors will repeat
$palette: (#EBE998, #D1D6B5, #A1BEC6, #777FC0, #59546A);

然后，为每种颜色输出一条nth-child规则。（我使用表格作为我的标记，但你明白了）。

$i : 1;
@each $color in $palette{
    // select every [length of list]th table row, starting with first, second, etc
    tr:nth-child(#{length($palette)}n + #{$i}){
        background-color: $color;
    }
    $i: $i + 1;
}

沿行的变暗更像是一种技巧......基本上使用第二个元素（在我的情况下，td行内的 s 但您可以根据标记进行调整），并使用逐渐不透明的黑色背景颜色：

// assumes you'll have a max of 20 columns in the table
@for $i from 1 through 20{
    td:nth-child(#{$i}){
        background-color: opacify(rgba(0,0,0,0), $i*.04)
    }   
}

这是关于 codepen 的演示：http ://codepen.io/noraspice/pen/doEyJq?editors=110 。

于 2015-08-16T02:05:32.293 回答