<分区>
标签 css sass css-counter
<分区>
我有一组数据行，每行显示为(标签 + 值)的一个图 block 。我将它们包装在 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) 同一行中后续图 block 的标签是依次变暗。
我可以通过调整 tile 属性来获得网格视觉效果
.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 的答案。
最佳答案
@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;
}
沿着行的变暗更像是一种 hack...基本上使用第二个元素(在我的例子中，行内的 tds 但你可以调整你的标记)，并使用逐渐不透明的黑色背景颜色:
// 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 .
关于css - 如何根据div的css-counter设置背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31998843/