Sass @mixin Rules

Last Updated:

Sass @mixin Rules

@mixin allows you to define styles that can be re-used throughout your stylesheet.

Sass @mixin Rules Without Parameter

Example

SASS TO CSS CONVERTER
// mixin act as a user-defined style @mixin reset-ul{ margin: 0; padding: 0; font-size: 16px; color: black; list-style-type: none; } footer ul{ @include reset-ul; }

Syntax

@mixin mixinName($a, $b){ // css property };

Sass @mixin Rules With Parameter

Example

SASS TO CSS CONVERTER
// @mixin with arguments @mixin reset-ul($a, $b) { margin: 0; padding: 0; font-size: $a; color: $b; list-style-type: none; } footer ul{ @include reset-ul(20px, green); }

Sass @mixin Rules With Optional Parameter

Example

SASS TO CSS CONVERTER
// @mixin with optional argument @mixin reset-ul($a, $b: red) { margin: 0; padding: 0; font-size: $a; color: $b; list-style-type: none; } footer ul{ @include reset-ul(20px); }

Share this Page

Meet the Author