How to Use Mixins

Mixins in Sass are a powerful way to create reusable styles, keeping your stylesheets modular and reducing duplication. They allow you to encapsulate a group of CSS properties and apply them across multiple selectors.

Best Practices

  1. Avoid Overuse: While mixins are useful, excessive use, especially without parameters, can lead to bloated CSS due to code duplication. Use mixins judiciously to balance maintainability and performance.

  2. Utilize Placeholders for Repeated Styles: For styles that don't require parameters and are reused frequently, consider using placeholders (%) with the @extend directive. This approach avoids duplication in the compiled CSS.

  3. Organize Mixins Logically: Store mixins in a dedicated file (e.g., _source.sass) and import them into your main stylesheet. This organization enhances code readability and maintainability.

Defining a Mixin

A mixin is declared using the @mixin keyword, followed by a name and an optional parameter list.

// src/sass/_source.sass
@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

Using a Mixin

To apply the mixin, use the @include directive:

// src/sass/components/_buttons.sass
@import '../mixins';

.button-primary {
  @include button-style(#3498db, #ffffff);
}

.button-secondary {
  @include button-style(#2ecc71, #ffffff);
}

This keeps the styles flexible, allowing color customization while reusing common button properties.

Install Necessary Dependencies

First, ensure you have Node.js and npm installed. Then, install the required packages:

npm install sass browser-sync concurrently nodemon rimraf --save-dev

Configure package.json Scripts

In your package.json file, define scripts to handle various tasks:

{
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && sass src/sass/custom.sass:dist/prod.css --style compressed && cp src/index.html dist/ && cp src/404.html dist/",
    "serve": "browser-sync start --server dist --files 'dist/**/*' --no-notify",
    "start": "npm run build && npm run serve",
    "watch:sass": "sass --watch src/sass/custom.sass:dist/prod.css --style compressed",
    "watch:files": "nodemon --watch src --ext html --exec \"cp src/*.html dist/\"",
    "dev": "npm run clean && npm run build && concurrently \"npm run watch:sass\" \"npm run watch:files\" \"npm run serve\""
  }
}

Script Breakdown:

Running the Scripts

Development Mode: For active development with live reloading, run:

npm run dev

This command watches for changes in your Sass and HTML files, recompiles them, and reloads the browser automatically.

Production Build: To create a production-ready build, run:

npm run build

This command compiles and compresses your Sass files and prepares your HTML files in the dist directory for deployment.

Additional Resources:

How to Build Components That Leverage Mixins

When structuring your components, it’s best to follow a modular approach, keeping mixins in a separate file and applying them where needed.

Example: Building a Card Component

  1. Define a Card Mixin

// src/sass/_source.sass
@mixin card-style($border-radius: 8px, $shadow: 0px 4px 6px rgba(0, 0, 0, 0.1)) {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $shadow;
  padding: 16px;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
  }
}

  1. Apply the Mixin to a Card Component

// src/sass/components/_card.sass
@import '../mixins';

.card {
  @include card-style;
  width: 300px;
}

  1. Use the Component in HTML

<div class="card">
  <h2>Card Title</h2>
  <p>This is an example card with reusable styles.</p>
</div>

Now, every .card will inherit the default styling, but it remains customizable via parameters.

How to Build Styles for Use in Components

To maintain consistency across your project, you should:

Example: Styling an Input Field

  1. Define Input Styles Using a Mixin

// src/sass/_source.sass
@mixin input-style($border-color: #ccc, $focus-color: #3498db) {
  border: 1px solid $border-color;
  padding: 8px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s;

  &:focus {
    border-color: $focus-color;
  }
}

  1. Apply the Mixin in an Input Component

// src/sass/components/_input.sass
@import '../mixins';

.input {
  @include input-style;
  width: 100%;
  font-size: 16px;
}

  1. Use It in HTML

<input type="text" class="input" placeholder="Enter text here">

Now, all input fields share a consistent style.

What Our Exporter Supports

What It Updates

What It Doesn’t Update

Additional Resources