Okay, this is going to be a very long one! I will be explaining to you about the conversion of px to em in due course, so sorry about that!
First of all, mixin can only be used in SASS (just stating in case it is not aware).
Mixin is like a reusable block of code. Some would say it is similar to a function. You create the definition using the keyword @mixin and give it a name. Then, add the CSS styles within the block.
To reuse those styles is to add the keyword @include followed by the name of the mixin within the declaration. Also, you can pass in an argument too (I will explain it in the example).
The only difference is what happens in the process:
- Functions - you call the function and it returns the value.
- Mixin - you reuse the mixin and applies reusable CSS styles
The purpose of mixin is to prevent writing the same CSS styles to different declarations over again and again. Especially if it is long = not very productive.
So, now you have seen some of the snippets in my code, using the two code snippets that were mentioned, I will show you the CSS way (the not so productive way) and the SASS way (which prevents repeating long codes), so that way you can see the difference.
Case One
In CSS
Well, I am sure you know the CSS syntax of media queries. In CSS, you would have to constantly either write the media queries for particular selectors OR you write one (say for tablet devices) and re-write all the needed selectors within.
In SASS
a) @mixin responsive($breakpoint) {
b) @if $breakpoint == small-phone {
// 28.125em = 450px
@media only screen and (max-width: 28.125em) {
c) @content;
} //450px
}
}
// other lines of codes
&__social-media {
display: inline-block;
fill: url(#icons--social-media);
font-size: 5rem;
// more lines of code
d) @include responsive(tsmall-phone) {
font-size: 5.5rem;
}
a) So I have created a mixin, responsive to apply media queries in certain conditions. It comes with one argument. What meant to be passed in are the descriptive names of breakpoints such as desktop, tablet (portrait size) and so on.
b) The media queries only get applied if the passed argument matches the keyword.
c) However, because it is unknown what CSS styles will be applied in the future, thankfully there is a special keyword @content that will take whatever the CSS styles are applied and placed it into the media query for that specific screen device
d) In the social-media selector, we want to change the font size to 5.5rem for small mobile phones. Instead of writing the long media query, you re-use the mixin, pass the argument, small-phone (so it matches the media query) and apply the font size changes
Case Two
Okay this is an easier to explain and this time I am going to make up names of classes just for demonstration purpose.
In CSS
Instead of having to write:
.paraForArticle {
color: $col-brown-dark;
font-family: $font-lora;
font-size: 1.75rem;
font-weight: 400;
@include responsive(tab-land) {
font-size: 1.9rem;
}
}
@media only screen and (max-width: 28.125em) {
font-size: 1.9rem;
}
.textForSidebar {
color: $col-brown-dark;
font-family: $font-lora;
font-size: 1.75rem;
font-weight: 400;
@include responsive(tab-land) {
font-size: 1.9rem;
}
}
@media only screen and (max-width: 28.125em) {
font-size: 1.9rem;
}
And so on…
In SASS
It is best to write is as:
@mixin body-text {
color: $col-brown-dark;
font-family: $font-lora;
font-size: 1.75rem;
font-weight: 400;
// you can even reuse the code within a mixin!
@include responsive(tab-land) { font-size: 1.9rem; }
}
// Yes, it is technically repeating, but in the shortest way as possible
.paraForArticle {
@include body-text;
}
.textForSidebar {
@include body-text;
}