Sass : @function, @mixin, placeholder, @extend
Tags: sass, scss, frontend, css
Published: 2019-01-14 17:00:10

---
title: Sass : @function, @mixin, placeholder, @extend
published: true
description: quick explanation of the difference between @mixin, @function, placeholder
tags: sass, scss, frontend, css
---

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.