is it valid to declare css variable in class? [duplicate]

Question

I did not see css variable declaration (syntax) like before,

generally i use css variable like using :root{}.. below code is difference...

after run webpack, below css code i find...

is it valid syntax ? I am using vs code editor, editor does't show any error also..

Or maybe I am wrong somewhere else, Just leave a comment..

Bootstrap Sass Imported

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";

Output CSS Syntax

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

from the duplicate Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules — Temani Afif
– Temani Afif, Commented Feb 15, 2021 at 9:02

jo3rn · Accepted Answer · 2021-02-15 08:55:11Z

1

Yes, these are called custom properties

Custom properties allow a value to be stored in one place, then referenced in multiple other places.

Note how --bs-gutter-x is reused in lines 7 and 8. The advantage is that you now only need to change the value in one place (line 2).

answered Feb 15, 2021 at 8:55

jo3rn

1,4491 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

is it valid to declare css variable in class? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related