How to Dynamically Generate a List of Classes With Commas Separating Them

How to dynamically generate a list of classes with commas separating them?

I think you may want to take a look at @extend. If you set that up something like:

$columns: 12;

%float-styles {
float: left;
}

@mixin col-x-list {
@for $i from 1 through $columns {
.col-#{$i}-m { @extend %float-styles; }
}
}

@include col-x-list;

It should render in your css file as:

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
float: left;
}

@extend in the docs.

How to dynamically create a list of Javascript objects into comma separated objects

Given two arrays, one with states, another with color names, you could use this function to get the end result:

function combine(states, colors) {    return colors.reduce( (result, color, i) =>         Object.assign(result, { [states[i]]: { fill: color } }), {});    }
// sample datavar states = ['MD', 'VA', 'IL', 'SC'];var colors = ['yellow', 'blue', 'red', 'green'];
// convertvar result = combine(states, colors);
// outputconsole.log(result);

Create dynamic class names using @while loop

To correctly write that expression would be like this:

$val: $val + '.dC#{$i}';

But you're forgetting to account for the comma, so your selector ends up looking like this:

.dC4.dC5 {
color: black;
}

Even if you did add the comma, you'd end up with all 3 classes preceded by a comma. There are more efficient ways to do what you're looking for that properly account for commas:

$minLevel: 1;
$whiteLevel: 3;
$blackLevel: 5;

%white {
color: white;
}

@for $i from $minLevel through $whiteLevel {
.dC#{$i} {
@extend %white;
}
}

$blackSelectors: ();
@for $i from $whiteLevel + 1 through $blackLevel {
$blackSelectors: append($blackSelectors, unquote('.dC#{$i}'), comma);
}

#{$blackSelectors} {
color: black;
}

Output:

.dC1, .dC2, .dC3 {
color: white;
}

.dC4, .dC5 {
color: black;
}

Add comma separated value to class list

One way you can do this is like this.

List<Language> _selectedLanguages;
_selectedLanguages = (responseBody['user_lang'].split(',') as List<String>).map((text) => Language(name: text)).toList();

Dynamic CSS style class that has a space or comma

This is what I have that works but is it working by a fluke or is the right way?

Your examples only work because in these specific examples CSS handles your single class as two separate classes. Especially this one:

<span class="Incomplete, Overdue">Incomplete, Overdue</span>

.Incomplete, .Overdue {
color: white;
background-color: red;
}

only works because of the .Overdue. To use commas and spaces in class names you would have to do it like this:

[class="Incomplete, Overdue"] {  color: white;  background-color: red;}
<span class="Incomplete Overdue">Incomplete Overdue</span><span class="Incomplete, Overdue">Incomplete, Overdue</span>

How to pass a dynamic comma separated string list to jenkins pipeline radio button input renderer?

You would indeed think that the type for the choice values would be list<string> because that is super intuitive, but for some reason it is a comma-delimited string instead:

String var1 = 'a, b, c'

and you will have the different choices displayed as desired.

Additionally, you may have had some complications by resolving the var1 like "$var1" which would force an implicit cast to a string since you are interpolating. You could avoid this by using the first class expression support value: var1.

Dynamically creating a list of css values in SCSS based on array

You were pretty close actually. You can use this syntax to generate the desired classes:

$list: 5, 10, 15, 20, 25, 30;

@each $n in $list {
.ml-#{$n} { margin-left:$n; }
}

the #{$n} is called interpolation and is required to make your variables accessible in the way needed here.

How to dynamically generate a list of classes with commas separating them?

I think you may want to take a look at @extend. If you set that up something like:

$columns: 12;

%float-styles {
float: left;
}

@mixin col-x-list {
@for $i from 1 through $columns {
.col-#{$i}-m { @extend %float-styles; }
}
}

@include col-x-list;

It should render in your css file as:

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
float: left;
}

@extend in the docs.



Related Topics



Leave a reply



Submit