Sass : @function, @mixin, placeholder, @extend

Frederick Jaime — Mon, 14 Jan 2019 17:00:10 +0000

In a recent project I had the opportunity to create a custom framework and while working on the structure, adding my functions, creating mixins, I decided to share some info with my fellow devs.

Here we go...
@function are blocks of code that return a single value of any Sass data type.
The function below is one that I constantly use, it takes a pixel size and converts into rem.

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return #{$rem-size}rem;
}
*I could easily just use numbers but
people in the past have had the 
habit of using px for all of their font sizes.

@mixin, very similar to a function but the main difference between the two is that mixins output lines of Sass code that will compile directly into CSS styles, while functions return a value that can then become the value for a CSS property or become something that might be passed to another function or mixin.

@mixin font-size($size) {
  font-size: calculate-rem($size);
}
mixin is taking $size as an argument to pass into
the calculate-rem function to evaluate into rems

When using the mixin you need to use like this : @include font-size(16px), this will compile into font-size: 1rem;

Alternatively, i could use the function directly in my class:

.my-class {
    font-size: calculate-rem(16px);
}

Placeholder are very similar to class selectors, but instead of using a period (.) at the start, the percent character (%) is used. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

@extend allows classes to share a set of properties with one another. Selectors that @extend a class will have their selector included right up next to the class it is extending, resulting in a comma separated list.

.foo {
  color: black;
  border: 1px solid black;
}

.bar {
  @extend .foo;
  background-color: red;
}

the above compiles to :

.foo, .bar {
  color: black;
  border: 1px solid black;
}

.bar {
  background-color: red;
}

Placeholder are meant to be used with @extend, so normally if you are aware that a set of attributes will be used across a handful of elements you can create a placeholder and extend the properties.

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
.foo {
  @extend %icon;
  color: black;
  border: 1px solid black;
}

.bar {
  @extend %icon;
  background-color: red;
}

this will compile into:

.foo, .bar {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.foo{
  color: black;
  border: 1px solid black;
}

.bar {
  background-color: red;
}

This is a quick explanation on these Sass features, with enough requests i can do a second part with more advance mixins and logic. I hope you people find this useful and if you have any questions feel free to reach out in the comments or directly.

-happy to help.

DEV Community: Frederick Jaime

Sass : @function, @mixin, placeholder, @extend