CSS动态类

时间:2015-12-14 02:05:30

标签: css

假设我有一个带有属性数据列的flex包装容器,如下所示:

<div class="grid" data-columns="2"></div>

.grid {
    display:flex;
    flex-wrap:wrap;
}

.grid[data-columns=2] > * {
    width:50%;
}

.grid[data-columns=3] > * {
    width:33.3%;
}

.grid[data-columns=4] > * {
    width:25%;
}

这个想法是.grid类元素的子元素的宽度为1 / grid.data-columns。现在我当然可以写一堆它们,但我想知道是否有更动态的方法来做到这一点? css实际上可以从父元素中获取列数并在计算中使用它来确定宽度吗?

2 个答案:

答案 0 :(得分:-1)

不要用&#34来理解这一切; css能否实际从父元素中获取列数并在计算中使用它来确定宽度?&#34;,但是如果你得到了,如何用类&#34; grids_child&#34;来说 2 孩子in&#34; grid&#34;你可以做到

.grid_child{width:calc(100% / 2);}

这将使所有元素与&#34; .grid_child&#34;上课,要50%

我没有理解你的问题,但我告诉你这是因为我看到&#34; 1 / .grid&#34;。

一个很好的选择,就像有人告诉你一样使用前处理器

答案 1 :(得分:-1)

正如马克在评论中所说,

  

CSS3的attr()函数可能有效,但它只能获取所选元素的属性值,而不是父元素。

目前还没有支持CSS3&#39; attr()的浏览器。因此必须使用LESSSASS等外部工具来完成。

这是一个用LESS编写的例子:

@max: 10;
.col(@index) when (@index =< @max) { // iterate
    .grid[data-columns=@{index}] > * {
        width: percentage(1 / @index);
    }
    .col((@index + 1));
}
.col(@index) when (@index > @max) {} // terminal
.col(1); // kickstart it

,这将被翻译为

.grid[data-columns=1] > * {
  width: 100%;
}
.grid[data-columns=2] > * {
  width: 50%;
}
.grid[data-columns=3] > * {
  width: 33.33333333%;
}

/* ...... */

.grid[data-columns=10] > * {
  width: 10%;
}