If/Else statement in Sass to alter css based on number of items in list

Question

I have a list of items that I am stying with flex. They're stacked in one horizontal row.

I wondered whether it would be possible to write an if/else statement that basically does the following:

If there are 4 or less items in the list, use justify-content: space-between, but if there are 5 or more items, use justify-content: space-evenly.

I'm struggling to get my head around how I would write such a thing to test it and couldn't quite find anything in the Sass docs that covers such a scenario - is something like this possible?

Please avoid posting questions the end "is something like this possible?". It won't end well for you. https://stackoverflow.com/help/how-to-ask — Scott Brown, Oct 27 '17 at 09:26
[*Styles cannot be applied to a parent node based on the number of children it has*.](https://stackoverflow.com/a/12198561/3162554) — Marvin, Oct 27 '17 at 10:29
whenever you're wondering how to do something in sass, first think about whether you would know how to write it in pure CSS. If you can't do it with CSS, you're not going to be able to do it with SASS. — andi, Oct 27 '17 at 13:33
Is there something missing in my answer I can add or adjust, for you to upvote and/or accept? ... or it simply didn't work? — Asons, Oct 29 '17 at 12:10
Since I didn't got a response, I deleted my answer and won't bother you in the future. — Asons, Oct 31 '17 at 06:59
Apologies @LGSon - I had not seen your comment, but it is now deleted so I cannot upvote/accept if it was correct :( — Sunil Sandhu, Oct 31 '17 at 12:31
No problem :) ... undeleted it...let me know if it is useful — Asons, Oct 31 '17 at 12:32
@LGSon - I haven't tried your code yet but it looks useful! Thanks — Sunil Sandhu, Nov 05 '17 at 21:46

Asons · Accepted Answer · 2017-10-27T14:48:00.893

Since you can't use SASS to count elements, you can use CSS to target a parent's children based on their amount (and when/if we get a parent selector, we can target the parent too :)

Based on this solution Can CSS detect the number of children an element has? we can alter the nth-child to target all if there is 5 or more.

In your specific case, where you want to change the justify-content property, this won't help since that property is set on the parent, though there is other ways to create a space between flex items, i.e. auto margins, where this method can be used.

Stack snippet

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    background: blue;
    height: 20px;
    margin: 5px;
}

/* five or more items */
li:first-child:nth-last-child(n+5),
li:first-child:nth-last-child(n+5) ~ li {
    background: red;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

If that won't help, use a small script to add a class to a parent if its children is more than 4.

Stack snippet

$('ul').each(function(idx, el) {
  if(el.children.length > 4) {
    $(el).addClass('more_than_4');
  }
});

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    background: blue;
    height: 20px;
    margin: 5px;
}

ul.more_than_4 {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

score 0 · Answer 2 · answered Oct 27 '17 at 09:29

0

Here is the syntax for writing if/else statements in SASS:

$var: true !default; 

@if $var == true {
  // Conditional code
}

$other: single;

@if $other == single {
  // Code for if it’s single
} @else if $other == double {
  // Double code
} @else {
  // Default if it’s neither
}

@if is a control directive, similar to @for, @each and @while.

answered Oct 27 '17 at 09:29

Scott Brown

334
1
2
13

this doesn't answer the question. OP is not asking how to write an if/else, he's asking how to write one specific if/else (which is not possible). – andi Oct 27 '17 at 13:34

If/Else statement in Sass to alter css based on number of items in list

2 Answers2