Geek asks and answers

LESS CSS: replacing a selector?

This is the existing css rule ( source file ):

.caption-top {
  color: red;
}

This is schematic, because in real life I need a selector .caption-topto become something else, depending on the context. But I would like to use a variable instead of changing all occurrences of the selector. For example, in one context it should become .field-name-field-caption-top. So I did this ( wrapper file ):

@caption-top:  .field-name-field-caption-top;
@caption-top {
  color: red;
}

This generates a LESS parsing error. Is there any other way to set a rule to replace a selector? Thus, in the example above, the rule will look like this:

.field-name-field-caption-top {
  color: red;
}

Additional Information

, css, , , "", , . , , , . ".caption" "@caption" ( ) .. ( ), , whould .

+3
3

escaping :

@selector: '.myclass';

(~'@{selector}') {
    color: red;
}

:

(~'@{selector}') .another {
    color: red;
}


@selector: '.myclass .another';
+2

, CSS:

.generator(@fieldName, @fieldCaption) {
  .@{fieldName}-@{fieldCaption}-top {
    color: red;
  }
}
.generator(foo, bar);

( -)

CSS "foo" "bar". .generator , , .

, , CSS.

+2

, mixins - , :

.caption-top {
    color: red;
}
.field-name-field-caption-top {
    .caption-top
}

, , . , CSS:

.field-name-field-caption-bottom {
    font-size: 3em;
    .caption-top
}

!

0

More articles:


All Articles