One of the challenges in a developer's life is speeding up and automating the development process while keeping high-quality standards. A great solution for front-end developers using SASS is its mixin capability.
First of all, why is it good to use mixins, and how can it help you?
You should use mixins because it lets you make groups of CSS declarations that you want to reuse through your website.
Also, you can pass in values to make your mixin more flexible. Mixins are good because they make your code cleaner, and they are in the same file, so you can easily find them.
What is SASS (SCSS)?
SASS is an extension of CSS that allows you to use things like variables, nested rules, mixins, functions, etc. It makes your CSS cleaner and enables you to create style sheets faster. It is compatible with all versions of CSS. It is the most mature, stable, and powerful CSS extension in the world.
What is the difference between SCSS and SASS?
SASS is a pre-processor scripting language that compiles into CSS, while SCSS is the main syntax for the SASS, which builds on top of the existing CSS syntax.
SCSS example:
/* .scss file */
$background-color: #eeeeee;
$font-color: #333333;
$font-size: 24px;
/* Use the variables */
body {
background-color: $background-color;
color: $font-color;
font-size: $font-size;
}
SASS example:
/* SASS */
$background-color: #eeeeee;
$font-color: #333333;
body
color: $font-color
background: $background-color
What is mixin in SASS?
Mixin is a directive that lets you create CSS code that is reused throughout the website. A mixin allows you to make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
In my opinion, mixins are the biggest feature because it allows you to write cleaner code.
How to use mixins?
You have to use @include followed by the name of the mixin and a semi-colon.
Example of usage
h1 {
font-size: 14px;
line-height: 22px;
@include respond-above(md) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}
After compiling this SCSS code into CSS, our CSS file should look like this.
h1 {
font-size: 14px;
line-height: 22px;
@media only screen and (min-width: 768px) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}
You can try our mixins in an online compiler.
And, the mixins...
1.Fluid typography
We use this mixin for responsive typography because we can avoid unnecessary media queries. It saves you a lot of time and minifies your CSS code.
You don’t have to worry about line-height because we’ve extended the mixin, and it automatically calculates your line-height.
@mixin fluid-font($min-width, $max-width, $min-font-size, $max-font-size) {
$unit1: unit($min-width);
$unit2: unit($max-width);
$unit3: unit($min-font-size);
$unit4: unit($max-font-size);
@if $unit1 == $unit2 and $unit1 == $unit3 and $unit1 == $unit4 {
& {
font-size: $min-font-size;
line-height: $min-font-size * 1.618;
@media screen and (min-width: $min-width) {
font-size: calc(
#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)})
);
line-height: calc(
#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
1.618 *
((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)})
);
}
@media screen and (min-width: $max-width) {
font-size: $max-font-size;
line-height: $max-font-size * 1.618;
}
}
}
}
Source: CSS-Tricks
Example of usage
The first two arguments are for screen resolutions from which the font will be responsive. The last two arguments are for the smallest and largest font size.
@include fluid-font(320px, 1024px, 22px, 55px);
2.Media queries for mobile-first design
This mixin is a time saver and simple for writing beautiful media queries. Name your breakpoints, so they are understood by all team members. You can use pixel values, but we have some default breakpoints setup that works great.
$breakpoints: (
"xs": 25em, // 400px
"sm": 34em, // 544px
"md": 48em, // 768px
"lg": 60em, // 960px
"xl": 80em, // 1280px
"xxl": 90em // 1440px
);
@mixin respond-above($breakpoint) {
// If the breakpoint exists in the map.
@if map-has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map-get($breakpoints, $breakpoint);
// Write the media query.
@media (min-width: $breakpoint-value) {
@content;
}
// If the breakpoint doesn't exist in the map.
}
@else {
// Log a warning.
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
Example of usage
h1 {
font-size: 14px;
line-height: 22px;
@include respond-above(md) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}
3. Text shortening
Adding an ellipsis to text is not simple. But when you have this great mixin, it’s quite simple, and it can come in handy when you’re working with a lot of text, especially on small screen resolutions.
// Default line-clamp is 1
@mixin text-shorten($numLines: 1) {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@supports (-webkit-line-clamp: $numLines) {
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: $numLines;
-webkit-box-orient: vertical;
}
}
Source: DeveloperDrive
Example of usage
If you want to add an ellipsis to text with multi-lines, you only need to pass one argument.
@include text-shorten(3);
For single line just leave it empty
@include text-shorten();
4.Placeholders
Usually, the problem with placeholders is that you have to write support for all browsers. Luckily this mixin sorts it out for you.
@content allows us to pass a content block into a mixin.
@mixin placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
Source: engage
Example of usage
input,
textarea {
@include input-placeholder {
color: #333333;
}
}
5.Flexbox Toolkit
You should use this mixin if you are using flexbox way too much. If you have a problem knowing which one represents the main axis and which one the cross axis, this is a perfect mixin for you. It is pretty simple to use because the names are self-descriptive.
@mixin flex-column {
display: flex;
flex-direction: column;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-center-column {
@include flex-center;
flex-direction: column;
}
@mixin flex-center-vert {
display: flex;
align-items: center;
}
@mixin flex-center-horiz {
display: flex;
justify-content: center;
}
Example of usage
.main-container {
height: 100vh;
@include flex-center
.centered-item {
width: 100%;
max-width: 400px;
}
}
6.Z-index
Technically this is a pure function, not mixin. But I felt it’s worth being on the list because “z-index” is mostly misunderstood. Most developers use values like “999999”, just because they don’t really understand “z-index”.
It’s so easy to lose track of z-index values when working in several different files. We started using it because everything is stored in one place and is easy to edit.
// breakpoint var (first in array is the largest number, etc array.length)
$z-indexes: (
"modal",
"sidebar",
“header”
);
@function z-index($name) {
@if index($z-indexes, $name) {
@return (length($z-indexes) - index($z-indexes, $name))+1;
}
@else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
@return null;
}
}
Source: engage
Example of usage
.header {
z-index: z-index(‘header’);
}
7. Position
It is not hard to position an element with CSS, but you can save a lot of time and few lines of code. It allows you to specify the position of element and values for the four directions: top, right, bottom, left, and z-index in just one line.
@mixin position($position: absolute, $top: null, $right: null, $bottom: null, $left: null, $z-index: initial) {
position: $position;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
z-index: $z-index;
}
Example of usage
In this example we use our “z-index function”
.element-absolute {
@include position(absolute, 60px, 0, 0, 0, z('modal'));
}
8.Responsive ratio
The responsive ratio is not supported for all browsers. We use this to lock the aspect ratio of an element or make it fit content if it exceeds the aspect ratio's boundaries.
@mixin ratio($x,$y, $pseudo: false) {
$padding: unquote( ( $y / $x ) * 100 + '%' );
@if $pseudo {
&:before {
@include pseudo($pos: relative);
width: 100%;
padding-top: $padding;
}
} @else {
padding-top: $padding;
}
}
Source: engage
Example of usage
img {
@include ratio(16, 9);
}
Top comments (0)