CSS import to variable level

Question

I am currently working on the CSS-styling of a Warning statement. This is a icon + a statement in this specific case. The code is as follow:

$sSCP .warning:before {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content:"\f071 WARNING";    /* <-- Font icon + statement*/  
}

It works all fine, but now my question!

Is there a way to change the static value "WARNING", written behide the content property to a dynamic one? I use translationfiles where all basic var/attr/strings have been translated.

Now it would be great if I can manage a import at var-ID level.

I was actually wondering if css can do this.

cheers, Frank

Data attribute perhaps - https://stackoverflow.com/questions/16451553/css-data-attribute-new-line-character-pseudo-element-content-value/42414062 — Paulie_D, Jan 24 '18 at 12:22

score 0 · Answer 1 · answered Jan 24 '18 at 12:24

Are you using a CSS preprocessor like SASS or LESS?

Because with CSS this isn't possible. You can manipulate content via javascript or print in the variable on the server.

Another suggestion is that you can maybe add a class for each language and then change the content based on the class.

eg:

$sSCP .warning:before {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content:"\f071 WARNING";    /* <-- Font icon + statement*/  
}

$sSCP .warning.french:before {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content:"\f071 ATTENTION";    /* <-- Font icon + statement*/  
}

$sSCP .warning.spanish {
    color: #E40613;
    background-color: #fafafa;
    font-size: 15px;
    margin-left: 0px;
    width: auto;
    content:"\f071 ADVERTENCIA";    /* <-- Font icon + statement*/  
}

No we don't use SASS or LESS. I'm writing now in a software override css-file. I also thought it wasn't possible. But it would do the trick. a pitty than! The second given solution involves too much work during support. Therefore we use the seperate translation-files. But thanks you for your awnser. Cheers, — Frank Manuela Thijssen, Jan 24 '18 at 12:51

CSS import to variable level

1 Answers1