how to add if-else logic in CSS file? - css

Question

I have the following .css.scss file
.book-list li {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
width:175px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
Now I wish to style a very similar list called .todo-list.
The only differences are:
.todo-list li element has width of 125px instead of 175px.
.todo-list li element does NOT have the special styling for the first-child
I would style my html in the following way:
<ul class="book-list">
<li>...
</li>
<li>...
</li>
</ul>
or
<ul class="todo-list">
<li>...
</li>
<li>...
</li>
</ul>
How can I achieve the above without duplicating the whole block?
(Essentially I'm looking for ways to add if-else condition in the css file.)
Thank you

Answer 1

You could use Mixins to re-use common code.
#mixin common-code {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list li {
width:175px;
#include common-code;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
.todo-list li {
width:125px;
#include common-code;
}
As far as I know, there are no If-Else clauses in SASS or pure CSS.

Answer 2

You can achieve this using the CSS attribute selector and the $= operator (which means 'ends with'):
[class$="list"] li {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list li:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
.book-list li {
width:175px;
}
.todo-list li {
width: 125px
}

Answer 3

I do not believe that there is a way to add logic css files. You could do it using javascript, however a pure css solution is possible.
.book-list li, .todo-list li {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list li {
width: 175px;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
.todo-list li {
width: 125px;
}
Note: In css the last property given to an element will be the one used. This means that you can style .todo-list li to overwrite the previous assignment of width and &:first child should you wish to do so.

Answer 4

You can use inheritance in Sass like:
.list {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list {
#extend .list
li {
width: 125px;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
}
.todo-list {
#extend .list;
li {
width: 175px;
}
}