What is a Mixin and how to use it in SASS ?
Last Updated :
18 Apr, 2022
In this article, we are going to explain and see the usage of Mixin. Mixin is used in Sass, which is a CSS preprocessor. Mixin works as a function in Sass and helps us to reduce the writing same code over and over.
Syntax
@mixin <name>(<parameter>){
// Code...
}
name: We have to provide the name of our mixin so that we can use it later in the other classes.
parameter: Here parameter is optional, but if we have to use, we will have a variable with $ sign Ex; $value.
Now let's understand how we can use mixin in our projects. So first we have to understand that mixin is an exclusive component of SASS, and we will use it in a separate file and then include it in our HTML page. So in the given examples below, we will use the compiled Sass.
Let's consider a scenario where we have multiples div, and we have to alter some properties like border-radius, background-colour, etc. then we have to write the same code over and over for each class. Here we can use the mixin and use the mixin in each class where we need to change the CSS properties. We have to take care of one more thing while using mixin, when we have to use the mixin then we have to use a keyword @include then the name of the mixin and pass the required parameter.
Sass Code
// Use of mixin
@mixin bg-color($color) {
background-color: $color;
}
.div1 {
width: 100px;
height: 100px;
@include bg-color(red); // mixin call
}
.div2 {
width: 100px;
height: 100px;
@include bg-color(green); // mixin call
}
Compiles CSS code of the above Sass code
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: green;
}
The SASS code written above is the actual method of creating mixing. Now in the example, we will use the compiled SASS code which will appear in normal CSS.
Example 1: In this example, we will use compiled CSS file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mixins</title>
</head>
<style>
.div1 {
width: 150px;
height: 50px;
background-color: red;
text-align: center;
}
.div2 {
width: 150px;
height: 50px;
background-color: green;
text-align: center;
}
</style>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="div1">
<p>GeeksforGeeks</p>
</div>
<div class="div2">
<p>GeeksforGeeks</p>
</div>
</body>
</html>
Output:
We can use the mixin in another way in which we will initially give the value to the properties and then use it in other classes. Note that we can have as many mixins as we want.
Sass code
// use of mixin
@mixin bg-color($color) {
background-color: $color;
}
@mixin border-radius($radius) {
border-radius: 10px;
}
.div1{
width: 100px;
height: 100px;
@include bg-color(red); // mixin call
@include border-radius(10px); // mixin call
}
.div2{
width: 100px;
height: 100px;
@include bg-color(green); // mixin call
@include border-radius(10px); // mixin call
}Compiles CSS code of the above Sass code
.div1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 10px;
}
.div2 {
width: 100px;
height: 100px;
background-color: green;
border-radius: 10px;
}
Example 2: In this example, we have initially given the value of border-radius 10px at the time of creating the mixin, and then we have used it in the div classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.div1 {
width: 150px;
height: 50px;
background-color: red;
border-radius: 5px;
text-align: center;
}
.div2 {
width: 150px;
height: 50px;
background-color: green;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="div1">
<p>GeeksforGeeks</p>
</div>
<div class="div2">
<p>GeeksforGeeks</p>
</div>
</body>
</html>
Output:
So, this was a basic overview of how we can use the mixin in our projects to make our tasks easier for larger projects, we can also use multiples properties at once in the mixin and use it afterwards.
Similar Reads
How to use SCSS mixins with angular 7?
When working with the Angular CLI, the default stylesheets have the .css extension. Starting an Angular CLI Project with Sass Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter. Create a new project with Sass w
5 min read
What is the use of Mixins in LESS ?
In this article, we will know what is Mixins in LESS, along with understanding their implementation & usage through the example. A CSS preprocessor is a program that generates the CSS code by using the defined preprocessor ruleset & facilitates reducing the overall complexity of CSS code. LE
5 min read
How to Install Dart Sass in Linux?
SASS or Syntactically Awesome Style Sheet is an upgrade over standard CSS and provides much-needed features that are missing from CSS like variables, operators, at-rules, nesting, mixins, inheritance, and much more. SASS files are used the .scss extension. Unfortunately, even modern browsers like ch
2 min read
What is the use @error and @debug directives in SASS ?
In this article, we will see the use of @error and @debug directives in SASS. Sass is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. so that we can reuse the code in multiple elements. The @error directive Sass
2 min read
What is the use of Namespaces and Accessors in Less ?
LESS (stands for Leaner Style Sheets) is a backward-compatible extension for CSS. LESS is a CSS pre-processor that provides you to customize, arrange, and utilize the style sheets for the webpage. Less is a dynamic style sheet language that can be executed on the client-side or server-side. Less com
2 min read
What is the use of SASS @import function ?
Writing code using native CSS language is sometimes quite confusing, lengthy, and complex. To reduce the complexity of writing CSS code, we use CSS preprocessors. One of the most popularly used CSS preprocessors is SASS. In this article, we will learn about the use of the @import function in SASS. T
2 min read
How to use a sass variable in nth child class ?
SASS is one of the most popular CSS extension languages which provides superpower to the normal CSS. The nth-child() class is a pseudo-class, when some HTML element has more than two elements of the same kind then we can use the nth-child class pseudo-class to provide styling to those elements witho
2 min read
Why to use SASS instead of CSS ?
SASS (Syntactically Awesome Style Sheet) is a CSS preprocessor. It is a scripting language that is compiled into regular CSS, allowing you to use features such as variables, nested rules, and mixins in your stylesheets. It adds additional features and functionality to CSS. SASS can help to make your
6 min read
How to calculate percent minus px in SASS ?
Calculating the difference between percent and px is not as simple as 50% - 30px. Obviously you'll be getting incompatible unit error. This is because SASS cannot perform arithmetic operations on values that cannot be converted from one unit to another. SASS does not know exactly how wide a "percent
2 min read
How to Use Sass with CSS?
SASS (Syntactically Awesome Style Sheets) is a pre-processor for CSS that provides various features such as nesting and mixins. SASS compiles to regular CSS and that CSS is used in your project and finally by the browser to style the web page.How SASS Works?Let's understand how Sass works:The SASS c
3 min read