DEV Community

Frederick Jaime
Frederick Jaime

Posted on

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

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.
Enter fullscreen mode Exit fullscreen mode

@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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

@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;
}
Enter fullscreen mode Exit fullscreen mode

the above compiles to :

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

.bar {
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
manoharyeluri profile image
Manohar Yeluri

Great job. This is helpful, Thanks for the write up.

Collapse
 
dinamri profile image
DinAmri

This is brilliant.

Collapse
 
abdallaanasser profile image
Abdalla Abdelnasser

thanks a lot, that's helpful 🙏