Using mixins

1 How to Use Mixins
- 1.1 Defining a Mixin
- 1.2 Using a Mixin
2 How to Build Components That Leverage Mixins
- 2.1 Example: Building a Card Component
3 How to Build Styles for Use in Components
- 3.1 Example: Styling an Input Field
4 What Eggstractor Supports
- 4.1 What It Updates
- 4.2 What It Doesn’t Update

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.

Eggstrator stores mixins in a dedicated file (_source.sass) where you can import them into your main stylesheet. This enhances code readability and maintainability, as well as keeping what comes from Figma separate from your own code.

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:

Sass: A preprocessor scripting language that is interpreted or compiled into CSS.
Browser-Sync: A live-reloading server for development.
Concurrently: Allows running multiple npm scripts simultaneously.
Nodemon: Automatically restarts the server on file changes.
Rimraf: A cross-platform tool to remove files and directories.

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:

clean: Removes the dist directory to ensure a fresh build.
build: Cleans the dist directory, compiles Sass to CSS with compression, and copies HTML files to dist.
serve: Starts a development server with live reloading using Browser-Sync.
start: Runs the build script and then starts the server.
watch:sass: Watches for changes in Sass files and recompiles them automatically.
watch:files: Watches for changes in HTML files and copies them to dist upon modification.
dev: Cleans the dist directory, builds the project, and runs watch:sass, watch:files, and serve concurrently for development.

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

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);
  }
}

Apply the Mixin to a Card Component

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

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

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:

Define global variables for colors, spacing, and typography.
Use mixins for reusable styles.
Structure components with BEM methodology (Block__Element--Modifier).

Example: Styling an Input Field

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;
  }
}

Apply the Mixin in an Input Component

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

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

Use It in HTML

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

Now, all input fields share a consistent style.

What Eggstractor Supports

What It Updates

Styling information
- Colors
- Typography (font, size, weight)
- Spacing (margins, paddings)
- Border radius
- Shadows
- etc
Works with variables as well as hard-coded values

What It Doesn’t Update

Non-styling information is not exported, e.g., text changes
Changes to structure must be coded (which can use mixins exported by Eggstractor) before they can be automatically updated via the plugin. For example, adding an error message to an input field component that didn’t already have one.
While support for all CSS properties is planned, not all of them are currently implemented.

Additional Resources