Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-except();).
The Except Sass mixin helps you apply style changes to every element in a list except the ones you choose.
Arguments
| Name | Type | Description |
|---|---|---|
$params… | string | The pseudo-class, class, or id selector. Accepts first, last, odd, even, and class or id selectors. |
$params… | number | The index number of the element in the list. You can also make multiple selections. |
Important: Passing multiple arguments only works with numeric values, and the values must be separated by commas.
Examples
Let's say you have a list of items wrapped in a container, just like the example below. Now you want to apply some style changes to all of them, except for one or more.
<div class="list-wrapper">
<div class="list-item">01</div>
<div class="list-item">02</div>
<div class="list-item">03</div>
<div class="list-item">04</div>
<div class="list-item">05</div>
<div class="list-item">06</div>
</div>Let's exclude the first one!
.list-wrapper{
.list-item{
@include except(first){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:first-of-type) {
background-color: #5bc0bb;
color: white;
}Now, let's try to exclude the last item in the list.
.list-wrapper{
.list-item{
@include except(last){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:last-of-type) {
background-color: #5bc0bb;
color: white;
}Now, let's exclude the third item in the list.
.list-wrapper{
.list-item{
@include except(3){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:nth-of-type(3)) {
background-color: #5bc0bb;
color: white;
}Let's exclude the elements whose position is even (e.g. 2, 4, 6, and so on).
.list-wrapper{
.list-item{
@include except(even){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:nth-of-type(even)) {
background-color: #5bc0bb;
color: white;
}Now, let's try something really fancy and exclude multiple items!
.list-wrapper{
.list-item{
@include except(1, 4, 5){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:nth-of-type(1)):not(:nth-of-type(4)):not(:nth-of-type(5)) {
background-color: #5bc0bb;
color: white;
}Let's exclude the items with class exclude on them.
<div class="list-wrapper">
<div class="list-item exclude">01</div>
<div class="list-item">02</div>
<div class="list-item">03</div>
<div class="list-item">04</div>
<div class="list-item">05</div>
<div class="list-item exclude">06</div>
</div>.list-wrapper{
.list-item{
@include except(".exclude"){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(.exclude) {
background-color: #5bc0bb;
color: white;
}Now suppose you don't know how many items will appear in the list, and you want to exclude the second item from the end. How can you do that? It's easy!
.list-wrapper{
.list-item{
@include except(-2){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:nth-last-of-type(2)) {
background-color: #5bc0bb;
color: white;
}Now let's pass multiple negative values.
.list-wrapper {
.list-item {
@include except(-2, -4) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:nth-last-of-type(2)):not(:nth-last-of-type(4)) {
background-color: #5bc0bb;
color: white;
}Now let's pass positive and negative values together.
.list-wrapper {
.list-item {
@include except(1, -1, -2) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:not(:nth-of-type(1)):not(:nth-last-of-type(1)):not(:nth-last-of-type(2)) {
background-color: #5bc0bb;
color: white;
}