How to simplify repeating lines in CSS blocks?

Asked Jul 08 '21 at 01:39

Active Jul 08 '21 at 01:39

Viewed 97 times

It must be a simple question, but the answer is not clear to me. I would like something simple. If I have these two CSS blocks, 1, 2, can I simplify so that the same lines are not repeated? As you noticed, only the color changes in them.

.glass-btn-main {/* 1 */
    background-color: #2961B6;
    border: solid 1px #2961B6;
    color: #F5F5F5;
    padding: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glass-btn-secundary { /* 2 */
    background-color: transparent;
    border: solid 1px #2961B6;
    color: #2961B6;
    padding: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Thanks in advance.

asked Jul 08 '21 at 01:39

Alexandra Danith Ansley

2

use a shared class like `.glass-btn` – Daniel A. White Jul 08 '21 at 01:49
I'd say you have 2 options, use a shared class like @DanielA.White suggested or if you're using a preprocessor like SCSS you can use `@extend`. Check this out [extend](https://css-tricks.com/the-extend-concept/) – Parco Jul 08 '21 at 01:57
[Can a CSS class inherit one or more other classes?](https://stackoverflow.com/q/1065435) – 001 Jul 08 '21 at 01:59
TXS Johnny. The simple solution I was looking for is:
– Alexandra Danith Ansley Jul 08 '21 at 16:19

How to simplify repeating lines in CSS blocks?

0 Answers0