时间戳

首页 > 解决方案 > 如何获取任何选择器的特定属性的值？

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

问题描述

我有来自第三方库的以下 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 文件中使用这个片段中的一些值来使我的块的高度与 rce 的项目同步。那么，是否有一个函数可以在我的样式中获取 height 属性（或任意属性）的值？

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

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

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

标签： sass

解决方案

这个“特性”已经在Github上讨论过了，不会在 Sass 的任何进一步版本中添加。

这是 CSS 添加的一个很好的功能。Sass 不会添加它，因为我们无法将文档继承考虑在内，因此它会让更多人感到困惑而不是帮助。

然而，这里有一个替代方案，使用maps、一个each 指令和一个自定义函数。

$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
}

推荐阅读