Today I Learned

ins8s

5 posts about #css

Apply Styles To The Last Child Of A Specific Type

The :last-child pseudo-class is a way of specifying styling that will only be applied to an element if it is the last child among its siblings. What if we have elements that are declared amongst elements of another type? This can complicate that styling.

The styling

span:last-child {
  color: red;
}

won’t take effect on our last span here

<div>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
  <div>Something unrelated</div>
</div>

because amongst its siblings it isn’t the last.

One way of getting around this is with the :last-of-type pseudo-class.

span:last-of-type {
  color: red;
}

See a live example here.

Parameterized SCSS Mixins

A mixin can be made to be much more versatile by parameterizing it. If you need variations of a block of CSS, then move the parts that vary out into parameters to the mixin.

@mixin navigation($background-color, $color, $link-color) {
  nav {
    display: flex;
    justify-content: space-around;
    background-color: $background-color;
    color: $color;

    ul {
      list-style: none;

      li a {
        text-decoration: none;
        color: $link-color;
      }
    }
  }
}

div.base-nav {
  @include navgation(#fff, #444, #222);
}

div.admin-nav {
  @include navgation(#000, #fff, #ddd);
}

The mixin can now easily be used to customize different segments of your app’s styling.

Dry Up SCSS With Mixins

If you have a similar chunk of styling that is being duplicated across your CSS, you’d probably like to dry it up to reduce the pain of maintaining it. Mixins provide one way of dealing with this problem.

First, declare a named mixin of the styles that you are trying to dry up.

@mixin navigation {
  nav {
    display: flex;
    justify-content: space-around;

    ul {
      list-style: none;

      li a {
        text-decoration: none;
      }
    }
  }
}

Then, this mixin can be included wherever it is needed.

div.base-nav {
  @include navgation;
  background-color: #fff;
  color: #444;

  nav ul {
    li a:hover {
      color: #222;
    }
  }
}

div.admin-nav {
  @include navgation;
  background-color: #000;
  color: #fff;

  nav ul {
    li a:hover {
      color: #ddd;
    }
  }
}

Any subsequent changes to the core navigation styling only need to be made in one place, the mixin.

source

h/t Dorian Karter

Lighten And Darken With CSS Brightness Filter

CSS has a filter property that can be used with a variety of filter functions. One of them is the brightness() filter. By feeding a percentage less than 100% to brightness(), the target element will be made darker. Inversely, feeding a percentage greater than 100% to brightness() will make the element brighter.

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

brighter, regular, and darker spans

See this CSS Tricks Article on the filter property for more details. Check out the browser support story here.

Lighten And Darken With SCSS

With SCSS, a color can be lightened or darkened by a certain percentage using the lighten and darken functions, respectively.

For instance, given the following HTML

<div class='one'></div>
<div class='two'></div>
<div class='three'></div>

I can style div.two with the original color and then style div.one with a lightened version and div.three with a darkened version.

$box-color: #0074d9;

.two {
  background: $box-color;
}
.one {
  background: lighten($box-color, 20%);
}
.three {
  background: darken($box-color, 20%);
}

The result looks something like this: