Use CSS class in another CSS file

Question

I have Asp.net Core 5.0.1 app with multiple MVC views. I also have a CSS file, generated by an app. I want this file to be unmodified (as it will be changed in future using same app). I want separate CSS file, which styles certain elements (eg input or button) to be styled using classes from the generated CSS. I dont want to write class on each input or button etc element (there are 35 views needs to be styled).

For example if generated file has class dx-theme-text-color I want a CSS file which has something like input { color:.dx-theme-text-color}

How can I achieve this?

To clarify: the question is - how to use a class from one CSS in another by name not copy/pasting values etc

Would the name dx-theme-text-color change everytime or stay the same? — David Liang
– David Liang, Commented Jan 5, 2021 at 18:28
it will change thats the problem. its part of the "theme" which is re-gen every time — Boppity Bop
– Boppity Bop, Commented Jan 5, 2021 at 18:38
I didn't mean the class value. I meant the name of the CSS class. Anyway, I posted my answer. Even the name of the CSS class dx-theme-text-color, you should only need to change at one place. — David Liang
– David Liang, Commented Jan 5, 2021 at 18:40

Majid Ghafoorzade · Accepted Answer · 2021-01-05 14:44:39Z

2

You can use css variables.

define css variavles in global scope:

:root {
    --my-custom-color: #000;
}

use variables in every css file like this:

.my-element {
    color: var(--my-costum-color)
}

You can also use css pre-proccesors like sass(scss), less and etc.

answered Jan 5, 2021 at 14:44

Majid Ghafoorzade

4984 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Boppity Bop Over a year ago

the colours are defined in the generated file. it will be overriden each time i use theme editor app. if I wanted to modify that file, instead of using variable etc i would just write my own styles there.. the question is - how to use a class from one CSS in another by name not copy/pasting values etc.

Majid Ghafoorzade Over a year ago

@boppity-bop it is not possible to inheritance classes in plain css. you should use sass for this purpose

Boppity Bop Over a year ago

just write it as an answer then.. i am surprised though.. why are they called cascading style sheets?

David Liang · Accepted Answer · 2021-01-05 18:39:22Z

1

I can only think of @extend from SASS:

.dx-theme-text-color {
    border: 1px solid red;
}

input, button {
    @extend .dx-theme-text-color;
}

answered Jan 5, 2021 at 18:39

David Liang

21.6k7 gold badges50 silver badges78 bronze badges

2 Comments

Boppity Bop Over a year ago

its been 25 yrs of web dev history and such a simple feature is not readily available.. i am disappointed :)

David Liang Over a year ago

I agree, but things are imrpoving a lot so there might be something new that works tomorrow :). Most people are using SASS nowthesedays. If your app that generates the theme CSSs can generate SASS instead, you can do a lot of awesome stylings with just few lines of codes.

Collectives™ on Stack Overflow

Use CSS class in another CSS file

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related