Trending September 2023 # How Do Mixins In Sass Work In The Html Page? # Suggested October 2023 # Top 17 Popular

You are reading the article How Do Mixins In Sass Work In The Html Page? updated in September 2023 on the website Cersearch.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 How Do Mixins In Sass Work In The Html Page?

Introduction to SASS Mixins

HTML has made great progress in recent years towards becoming more semantic. Sass provides a different way, through the @mixin directive which is used specifically to offer non-semantic styling. Mixins enable you to determine styles that can be reused through your stylesheet. They facilitate the elimination of using non-semantic classes like.float-left and the distribution of style collections in libraries.

Start Your Free Software Development Course

If a mixin is used, arguments that be passed by name as well as being passed by their position in the argument list. It is particularly useful for mixins with several optional arguments, or with boolean arguments whose definitions are not obvious without a name to follow.

Syntax 0f SASS mixins

The syntax for SASS mixins can be written as shown below:

{ Property 1: value; Property 2: value; } For instance: @mixin mymixin { color: red; } .myclass { @include mymixin; background-color: green; }

When you compile the above scss, you will have the following style code in the css as shown below:

.myclass { color: red; background-color: green; } How do Mixins Work in SASS?

The mixin’s main purpose is to render a collection of properties reusable. Like Sass variables (in which we specify the values at a single location), we can specify properties at a single location using Sass mixins. The main work of the Mixin is to create reusable CSS blocks and helps us to avoid repetitive code writing.

Examples to Implement Mixins in SASS

Let’s create an example to make use of the mixins in SASS. Here, we have created an HTML file called chúng tôi with the below code:

Example #1

Now create a file called sass_mixin1.scss with the below code:

sass_mixin1.scss @mixin my-mixin { color:#2F4F4F; } .class1 { @include my-mixin; background-color: #F4A460; } .class2 { @include my-mixin; background-color: #FF69B4; }

Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.

sass –watch sass_mixin1.scss: sass_mixin1.css

Now, execute the file with the above command and it will create the sass_mixin1.css file with the below code:

sass_mixin1.css .class1 { color: #2F4F4F; background-color: #F4A460; } .class2 { color: #2F4F4F; background-color: #FF69B4; }

Output:

Now, execute the html file and open in the browser and you will get the below result:

Example #2

Create an HTML file called chúng tôi with the below code:

Now create a file called sass_mixin2.scss with the below code:

sass_mixin2.scss @mixin my-mixin { color:#FA8072; } @mixin my-mixin1 { color:#708090; } .myheading{ h2{ font-size: 20px; @include my-mixin; } p { font-size: 20px; @include my-mixin1; } .myclass{ h3{ font-size: 20px; @include my-mixin; } P{ font-size: 20px; @include my-mixin1; } } }

Execute the file with the above command shown in the previous example and it will create the sass_mixin2.css file with the below code:

sass_mixin2.css .myheading h2 { font-size: 20px; color: #FA8072; } .myheading p { font-size: 20px; color: #708090; } .myheading .myclass h3 { font-size: 20px; color: #FA8072; } .myheading .myclass p { font-size: 20px; color: #708090; }

Output:

Now, run the html file and open in the browser and you will get the below result:

Example #3

Now create a file called sass_mixin3.scss with the below code:

sass_mixin3.scss @mixin myheading($color, $width) { border: $width dotted $color; } h2 { @include myheading(lightcoral, 3px); } h3 { @include myheading(greenyellow, 3px); }

Execute the file with the above command shown in the previous example and it will create the sass_mixin3.css file with the below code:

sass_mixin3.css h2 { border: 3px dotted lightcoral; } h3 { border: 3px dotted greenyellow; }

Output:

Now, run the html file and open in the browser and you will get the below result:

Conclusion

So far, we have studied about mixins in SASS which are incredible in the HTML page. The SASS mixins improves productivity and makes the CSS tasks very easily. Apparently, mixins are really useful and accelerate the workflow. Mixin is a block of code that enables us to combine CSS declarations which we can reuse everywhere on the website.