Sass and SCSS

5.

Reusability and Abstraction

5.1.

5.1.1.

Defining a Mixin

5.1.1.1.

`@mixin` Directive

5.1.1.2.

Mixin Structure

5.1.2.

Including a Mixin

5.1.2.1.

`@include` Directive

5.1.3.

Passing Arguments to Mixins

5.1.3.1.

Positional Arguments

5.1.3.2.

Keyword Arguments

5.1.3.3.

Default Values for Arguments

5.1.3.4.

Variable Arguments

5.1.4.

Passing Content Blocks

5.1.4.1.

`@content` Directive

5.1.4.2.

Yielding Nested Content

5.2.

Inheritance with `@extend`

5.2.1.

The `@extend` Directive

5.2.1.1.

Syntax and Usage

5.2.2.

Placeholder Selectors

5.2.2.1.

Defining Placeholders

5.2.2.2.

Using Placeholders with `@extend`

5.2.3.

How `@extend` Works

5.2.3.1.

Selector Grouping

5.2.3.2.

Output in Compiled CSS

5.2.4.

Potential Pitfalls of `@extend`

5.2.4.1.

Specificity Issues

5.2.4.2.

Unintended Selector Grouping

5.3.

Comparing Mixins and Extends

5.3.1.

When to Use `@mixin`

5.3.2.

When to Use `@extend`

5.3.3.

Performance and Output Considerations

Previous

4. Core Sass Features

Go to top

Next

6. Sass Data Types