sass - 我如何获得任何选择器的特定属性的值？

Question

我有来自第三方库的以下 CSS。

.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;
}

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

如果有一个 get-value 函数，我可以在下一个示例的已编译 SCSS 中获取 grid: auto 72px/auto。

@import 'third_party/rce/main.css';
.custom-layout {
    display: grid;
    grid: auto get-value(.rce-citem, height) / auto;
}

也许还有其他一些提取特定值的技术？

Answer 1

此“功能” 已在Github 上讨论过并且不会添加到 Sass 的任何进一步版本中。

This is a good feature for CSS to add. Sass isn't going to add it because we can't take the document inheritance into account and so it will confuse more people than it helps.

---

但是，这里有一个替代方案，使用 maps , 一个 each 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
}