Kevin Powell - Community•2y ago

css properties as global variables and can be used as a call back function?

hello, are there any similar method in CSS that can be used as global variable like in JS? i feel like im using display flex, aic,jcc over and over, instead of combining classes is there a way like call back function? like color: var(--primary) where primary is defined on top think

3 Replies

AvinashOP•2y ago

@willsterjohnson

WillsterJohnson•2y ago

Aside from custom properties or utility classes there isn't really anything else you can do in CSS. I'm assuming you mean something like;

@made-up-ruleset-group my-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.class {
  @made-up-applicator(my-group) // now `.class` has the above properties
}

@made-up-ruleset-group my-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.class {
  @made-up-applicator(my-group) // now `.class` has the above properties
}

If you're willing to learn SCSS/SASS (CSS with extra stuff you can do if you want to) you can do something similar. What you'll want is called a "mixin". Be aware that SASS code will not run in the browser, and it must be compiled before running your webpage. Kevin has several tutorials working with SASS on his YouTube channel, and there's a lot of info online as well. Plus if you get stuck, you can always ask here as a lot of folks are pretty good with SASS. SASS docs; https://sass-lang.com/

AvinashOP•2y ago

so with normal CSS it cant be done? im still new to css, so it will take few more months and then i will learn sass

Gaming

Programming

css properties as global variables and can be used as a call back function?