Search code examples
csssasscss-variables

Can a CSS custom property contain more than one value to be referenced?

Let's say I want to create a series of class selector values that can be reused multiple times.

.shaded {
   background: black;
   color: grey;
}

I then want to use both of those selector values in something else within the CSS.

.box1 {
   width: 100px;
   height: 100px;
}
.box2 {
   width: 75px;
   height: 75px;
}
.box3 {
   width: 50px;
   height: 50px;
}

I want box1, box2, and box3 to have the values of .shaded. I don't want to have type

background: black;
color: grey;

for box1, box2 and box3 each time. Is there a way to accomplish this using CSS custom properties e.g. "var(--shaded)"? If not CSS custom properties, what can I use? I have to avoid JS and things like it at all costs as I'm working in a sandboxed environment that doesn't allow access/use of JS etc. It's just Bootstrap and SCSS.

Solution

  • the "extend" capability of SASS (SCSS) helps you.

    just use 

    @extend .shaded

    where you want.

    you should write your CSS code in a .scss format file to be able.

    also the link below help you

    https://sass-lang.com/documentation/at-rules/extend