Highlighting awesome SASS snippets from Bulma

Being the awesome CSS framework that it is, Bulma has a very clean and structured SASS codebase. Let's dive in it and get some Sassy gems 💎 for ourselves.

Bulma is a framework I'd recommend to anyone, whether they are new in the scene or seasoned experts. Specially if you are learning SASS.
The things I'm gonna be highlighting today are not on their documentation. But give it a look if you want to harness the full potential of this humble but solid CSS framework.

⚠ Head's up!

Bulma is written in SASS completely, and I mean. SASS. So as a friendly reminder.

Mixins look different! @mixin newMixin() looks like this =newMixin() in SASS.
Includes look different! @include newMixin() looks like this +newMixin() in SASS.
SASS doesn't use semicolons ;.
SASS doesn't use curly braces {}.
SASS uses indentation instead for nesting. Be precise with it.

I'm adding bits of information and annotations in the code, look for 📚 comments.

💎 Easy placeholders for inputs

This mixin is not really needed if you have a prefixer, yet is an awesome way to swiftly style the placeholder of any input or textearea.

=placeholder
  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
  @each $placeholder in $placeholders
    &:#{$placeholder}-placeholder
      @content
      // 📚 Content passed to @include ends up where the @content directive is.

💎 Easier Media Queries

Useful when building specific media queries for any of your components.

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

Bulma has its own set of breakpoints defined with variables, this allows very specific mixins

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content
    // 📚 Content passed to @include ends up where the @content directive is.

💎 Overlaying absolute element

Do you need a gradient over an image for a sexier look?
A whole div to protect an image from being easily grabbed?
Perhaps an ::after or ::before that needs to cover its parent?

=overlay($offset: 0)
  bottom: $offset
  left: $offset
  position: absolute
  right: $offset
  top: $offset

Maybe you can mix it up, adding more parameters in case you want different offsets.

💎 Color Helper Mixins to find Dark and Light variants

colorLuminance determines the level of luminance a color has from 0 to 1.
This function in particular is one of my favorites from the library.

@function colorLuminance($color)
  @if type-of($color) != 'color'
  // 📚 Checking if its an actual color. If not, returns .55
    @return 0.55
  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  // 📚 Grabs each RGB value for the color
  @each $name, $value in $color-rgb
    $adjusted: 0
    $value: $value / 255
    @if $value < 0.03928
      $value: $value / 12.92
    @else
      $value: ($value + .055) / 1.055
      $value: powerNumber($value, 2)
     // 📚 Calculates amount of luminance for each color (RGB) and then stores it back in the variable.
    $color-rgb: map-merge($color-rgb, ($name: $value))
  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
  // 📚 Sums up the RGB luminances together to get the $color's luminance.

findColorInvert returns white or black(ish), with the help of previously defined function colorLuminance. This is very useful when we are creating components programmatically with an @each.

@function findColorInvert($color)
  @if (colorLuminance($color) > 0.55)
    @return rgba(#000, 0.7)
  @else
    @return #fff

findLightColor returns a light version of a color, through the use of the lightness function. The color given has to be below a certain level of lightness, or the function will return the same color.

@function findLightColor($color)
// 📚 Checks the type of the variable sent to the function
  @if type-of($color) == 'color'
    $l: 96%
    // 📚 After defining a base lightness level ($l), checks if $color isn't above it already. Then proceeds to adjust the color.
    @if lightness($color) > 96%
      $l: lightness($color)
    @return change-color($color, $lightness: $l)
    // 📚 If its not a color, returns a variable Bulma has already declared before.
  @return $background

findDarkColor returns a darker version of the color given. This function makes use of the function max, to always go with the base.

@function findDarkColor($color)
// 📚 Checks the type of the variable sent to the function
  @if type-of($color) == 'color'
    $base-l: 29%
    // 📚 After setting a base target of darkness ($base-l), gets the luminance of the color.
    $luminance: colorLuminance($color)
    $luminance-delta: (0.53 - $luminance)
    $target-l: round($base-l + ($luminance-delta * 53))
    // 📚 After doing some calculations, chooses the highest value between the target lightness ($target-l) and the base one defined previously.
    @return change-color($color, $lightness: max($base-l, $target-l))
    // 📚 If its not a color, returns a variable Bulma has already declared before.
  @return $text-strong

👋 Parting words

I've found myself learning a lot of SASS going through Bulma's repository and I with hope this article you did too!

These snippets 💎 I've highlighted here are but a fraction of their codebase and I encourage you to use Bulma the next time you need a CSS framework. It has a very well written documentation, its highly customizable and they are open source ♥.

If you liked this post or found it useful in anyway please let me know with a comment or reaction. Also if you want me to breakdown another popular CSS framework, let me know which one in the comments.

Blog