How do I get the value of a particular property of any selector?

Question

I have the following CSS from a third-party library.

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

I'd like to use some values from this snippet in my SCSS file to make the height of my block synced with rce's items. So, is there a function to get value of height property (or any arbitrary) inside my styles?

If there was a get-value function, I could get grid: auto 72px / auto in compiled SCSS from the next example.

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

Maybe there is some other technique of extracting specific values?

Answer 1

This "feature" has already been discussed on Github and won't be added in any further version of 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.

---

However, here is an alternative, using maps, an each directive and a custom 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
}