Search code examples
csstwitter-bootstrapwebpackcss-variables

is it valid to declare css variable in class?

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

enter image description here

Solution

  • 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).