String Concatenation in CSS

string concatenation in css

You can't do dynamic string interpolation in the way that you're suggesting, but if you have a limited number of possible values for the [type] attribute, you could create styles for each one:

.your .selector[type="foo"] {
    background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
    background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
    background-image: url('../img/icons/baz_10.png');
}

If you've got an unreasonable number of types, then you'll probably need to come up with a better solution than I've listed here.

Concatenate variable with string to form another variable

background: @{color-@{color}}; 

is not valid Less syntax, the proper one would be:

background: ~'@{color-@{color}}';

Note however, the very idea of indirectly refering to a variable values via escaping is a durty kludge (quite wide-spread but still very dirty).
It works when you assign such value directly to CSS property, but it will fail for anything else, simply because such value is not a color anymore but an unquoted string with an unknown content...
E.g. the following code will fail:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(~'@{color}', 50%); // error, not a color value
}

The proper Less method of getting a variable value via its name is "variable reference", e.g.:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(@@color, 50%); // OK, proper color value
}

---

Additionally, take a time to consider if the whole approach of having all these colors as distinct variables and then having a separate list of these variables names is really what you need. Normally a single list having both color names and values is not such awfully bloating and much more maintainable.

CSS attr() concatenation with url path

It is not possible to create a composite url() value out of two or more strings. On top of the legacy url() value, which isn't even a proper CSS function (see Is there a way to interpolate CSS variables with url()? — which means you can't even do this with custom properties), the proper CSS function version of url() as defined in css-values-3 only accepts a single string.¹

You can concatenate multiple strings in a content declaration, but that is a feature of the content property, not of strings in CSS.

---

¹ _{Since url() accepts a single string, this does mean that a single attr() can be used as a URL value, also new to css-values-3, as attr(image url)... except browser support is nonexistent.}

Multiple content: attr() values

To concatenate two or more string values in CSS, separate them with whitespace:

.element:before {
    content: attr(class) ' ' attr(data-size);
}

Note that the whitespace between the attr() functions and the quotes is not the same as the whitespace within the quotes. The latter is an actual string containing a space character, which will separate the two attribute values in the output. The whitespace between the three parts is the operator that joins them together.

Calculate and Concatenate in CSS variables

You can use calc() in your CSS properties to calculate pixel and percentage units of measurement with variables.

:root {
  --size: 100;
}

.myElement {
  background-color: lightgreen;
  margin: calc(var(--size) * .2%);
  padding: calc(var(--size) / 2 * 1px);
}

.myElement>span {
  background: limegreen;
}

<div class="myElement">
  <span>text</span>
</div>

concatenate strings using sass

$fractions:'';
@for $i from 1 through 4 {
    $fractions : $fractions + 1fr + ' ';
    .grid-#{$i} {
        grid-template-columns: #{$fractions};
        display: block;
    }
}

How to concat a string value in CSS property in Angular template

You can fix it using:

<div class="segment" ng-style="{'width': item.succeeded_time_pct + '%' }">

ng-style is a directive which angular offers to apply style properties dynamically

Ref: https://docs.angularjs.org/api/ng/directive/ngClass

---

Related Topics