如何获得任何选择器的特定属性的值?

时间:2018-10-16 11:09:24

标签: sass

我从第三方库中获得了以下CSS。

df = pd.concat([df1, df2], axis=1, keys=('1','2'))
df.columns = [f'{j}_{i}' for i, j in df.columns]
print (df)
   A_1  B_1  C_1  D_1  A_2  B_2  C_2  D_2
1    1    2    3    2    1    2    3    2
2    2    2    3    1    4    2   19    1
3    2    3    2    1    2   64    2    1

我想在我的SCSS文件中使用此片段中的一些值来使块的高度与rce的项目同步。那么,在我的样式中是否有一个函数可以获取height属性的值(或任意值)?

如果有一个.rce-citem { position: relative; background: white; display: flex; flex-direction: row; height: 72px; cursor: pointer; user-select: none; max-width: 100%; overflow: hidden; min-width: 240px; } 函数,我可以从下一个示例中获得get-value在已编译的SCSS中。

grid: auto 72px / auto

也许还有其他提取特定值的技术?

1 个答案:

答案 0 :(得分:1)

“功能” 已在Github上进行了讨论,不会在Sass的任何其他版本中添加。

  

这是CSS很好的功能。 Sass不会添加它,因为我们无法考虑文档继承,因此它会使更多的人迷惑。


不过,这是一种替代方法,它使用mapseach directive和自定义function

$rce-citem: (
  position: relative,
  background: white,
  display: flex,
  flex-direction: row,
  height: 72px,
  cursor: pointer,
  user-select: none,
  max-width: 100%,
  overflow: hidden,
  min-width: 240px,
);

.rce-citem {
  @each $property, $value in $rce-citem {
    #{$property}: $value;
  }
}

@function rce-citem($key) {
  @return map-get($rce-citem, $key);
}


.foo {
  height: rce-citem(height); // 72px
  min-width: rce-citem(min-width); // 240px
}