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.
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%);
}
}
|
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:
When structuring your components, it’s best to follow a modular approach, keeping mixins in a separate file and applying them where needed.
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.
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).
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.
Styling information
Colors
Typography (font, size, weight)
Spacing (margins, paddings)
Border radius
Shadows
etc
Works with variables as well as hard-coded values
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