Highlighting awesome SASS snippets from Bulma

Tags: beginners, webdev, sass, css
Published: 2020-10-15 13:58:20



> 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](https://sass-lang.com/install).**
The things I'm gonna be highlighting today are not on their **[documentation](https://bulma.io/documentation/customize/variables/).** 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`.

```sass
=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.

```sass
=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

```sass
=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?

```sass
=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.

```sass
@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`.

```sass
@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.

```sass
@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](https://sass-lang.com/documentation/syntax/special-functions#min-and-max), to always go with the base.

```sass
@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](https://bulma.io/documentation/overview/start/) 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.