Chris Redford
Chris Redford

Reputation: 17788

Generic String Setting via CSS / SASS

Is there some type of value that can be assigned any arbitrary string using CSS? For example, "large" or "small".

My purpose is to watch a generic div with display: none and change this as-of-yet-unknown type of value "large" or "small" via a media query. Javascript will watch for this change and use the assigned value.

Example HTML:

<div class="state"/>

Example corresponding SASS:

.state {
    @media #{$isSmall} {
        unknown-type-of-value: "small";
    }
    @media #{$isLarge} {
        unknown-type-of-value: "large";
    }
}

Upvotes: 0

Views: 80

Answers (1)

gen_Eric
gen_Eric

Reputation: 227270

You can't change the value of a <div> with CSS, but you can use :after to have css "append" text to it.

Something like

@media screen{
    div.test:after{
        content: "small";
    }

}

@media print{
    div.test:after{
        content: "large";
    }

}

DEMO: http://jsbin.com/edirad/1 (try to print it, and look at the preview)

Upvotes: 1

Related Questions