Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.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.
You can pass a string value to target elements by their id, class, or pseudo-class selector. Or you can pass a number (or multiple numbers separated by commas) to target items by their index position in the list.
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, a whole number counted from 1, or from the end when negative. You can also make multiple selections. A number with a unit, a fraction and 0 are refused. |
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;
}Remember that when you target multiple items in the list, the arguments you pass must be numbers separated by commas.
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;
}When you pass arguments for the id or class attributes of the items, don't forget to wrap your arguments in quotes.
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;
}Information: You can pass negative values to exclude elements based on their position among a group of siblings, counting from the end.
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;
}What it refuses
A position has to be a whole number. Until 2.3.1 anything numeric went into the selector as it was, and measured in Chrome 152, :not(:nth-of-type(1.5)) is an invalid selector, so the browser drops the whole rule and nothing is styled.
.list-item {
@include except(1.5) {
color: red;
}
}Error: `1.5` is not a valid position for `except`: a position is a whole number, and `:nth-of-type(1.5)` is an invalid selector, so the browser would drop the rule. Pass a number such as `2`, or `-2` to count from the end.A multiple of n is a position too: except(3n) writes :not(:nth-of-type(3n)) and leaves out every third element. An offset cannot be added, because Sass does the arithmetic first: except(2n+1) arrives as 3n. For odd or even elements, pass odd or even.
0 is valid CSS but excludes nothing, because positions count from 1.
.list-item {
@include except(0) {
color: red;
}
}Error: `0` is not a valid position for `except`: positions count from 1, so `:not(:nth-of-type(0))` excludes nothing. Pass `1` for the first, or `-1` for the last.