CODEWITHSUNDEEP
csssasscss-variables
Hideto
Hideto

Reputation: 309

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.

Upvotes: 0

Views: 187

Answers (2)

Müslüm ÇOBAN
Müslüm ÇOBAN

Reputation: 91

Let assume you have .shaded selector.

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

In Sass you can import any class definition into another selector like below

.box1 {
    @extend .shaded;
    width: 100px;
    height: 100px;
}
.box2 {
    @extend .shaded;
    width: 75px;
    height: 75px;
}
.box3 {
    @extend .shaded;
    width: 50px;
    height: 50px;
}
```

Upvotes: 1

Nortix Agency
Nortix Agency

Reputation: 211

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

Upvotes: 2

Related Questions