Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass @mixin and @include

Posted in Sass Tutorial
Updated on Sep 29, 2024
By Mari Selvan
πŸ‘οΈ 13 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass @mixin and @include

Photo Credit to CodeToFun

πŸ™‹ Introduction

In Sass, @mixin and @include are essential for creating reusable styles and maintaining a clean, organized stylesheet. They allow you to define a group of CSS properties that can be reused throughout your stylesheets, promoting consistency and reducing duplication.

πŸ’‘ Syntax

@mixin

The @mixin directive is used to define a set of CSS rules that can be reused. Its syntax is as follows:

Syntax
Copied
Copy To Clipboard
@mixin mixin-name {
  // CSS properties and values
}
  • mixin-name: The name of the mixin, which will be used to include it in other rules.

πŸ”’ Parameters

Mixins can also accept parameters, which makes them even more flexible. Here’s the syntax with parameters:

example.scss
Copied
Copy To Clipboard
@mixin mixin-name($param1, $param2) {
  // CSS properties using $param1 and $param2
}
  • $param1, $param2: Variables that can be used within the mixin.

@include

The @include directive is used to apply a mixin within a CSS rule. Its syntax is:

Syntax
Copied
Copy To Clipboard
@include mixin-name;
  • mixin-name: The name of the mixin you want to apply.

πŸ”’ Parameters

If the mixin has parameters, you provide them as follows:

Syntax
Copied
Copy To Clipboard
@include mixin-name($param1, $param2);
  • $param1, $param2: Values for the mixin parameters.

πŸ“ Example Usage

Let's explore some practical examples to see how the @mixin and @include can be used in Sass.

πŸ“œ Example 1: Basic Mixin

example.scss
Copied
Copy To Clipboard
@mixin border-box {
  box-sizing: border-box;
}

.container {
  @include border-box;
  width: 100%;
  padding: 20px;
}

In this example, the border-box mixin is used to apply box-sizing: border-box; to the .container class, ensuring that padding and borders are included in the element's total width and height.

πŸ“œ Example 2: Mixin with Parameters

example.scss
Copied
Copy To Clipboard
@mixin button($color, $padding: 10px) {
  background-color: $color;
  padding: $padding;
  border: none;
  color: white;
  cursor: pointer;
}

.primary-button {
  @include button(#007bff);
}

.secondary-button {
  @include button(#6c757d, 15px);
}

Here, the button mixin takes two parameters: $color and $padding. The primary-button class uses the mixin with a single color parameter, while the secondary-button class provides both a color and padding.

πŸ“œ Example 3: Advanced Usage with Default Values

example.scss
Copied
Copy To Clipboard
@mixin grid($columns: 12, $gutter: 20px) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gutter;
}

.container {
  @include grid(16, 30px);
}

In this example, the grid mixin has default values for its parameters. If no values are provided, it defaults to 12 columns and a 20px gutter. The container class overrides these defaults with its own values.

⚠️ Common Pitfalls

  1. Overusing Mixins: While mixins are powerful, overusing them can lead to code bloat and reduced maintainability. Use mixins for common patterns and reusable chunks of CSS, but avoid creating excessive numbers of mixins.
  2. Parameter Conflicts: Ensure that the parameters of your mixins are clearly named and used consistently to avoid conflicts and confusion. Misnamed parameters can lead to unexpected results.
  3. Inheritance Issues: Be cautious when using mixins with inherited styles. Ensure that mixins do not inadvertently override or conflict with other styles.

πŸŽ‰ Conclusion

Sass mixins (@mixin) and includes (@include) are invaluable tools for creating reusable and maintainable stylesheets. They promote code reusability, reduce redundancy, and help in managing complex styles more efficiently. By mastering these features, you can streamline your CSS development process and maintain a cleaner, more organized codebase.

Experiment with different mixins and parameters to fully leverage their capabilities. By doing so, you’ll be able to create flexible, dynamic styles that adapt to various design needs and ensure consistency across your stylesheets.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy