Developing sas mixins that dynamically assign values based on the margin position

Question

Developing sas mixins that dynamically assign values based on the margin position

Hello, I am currently working on creating a mixin to assign values based on the margin position. I have made progress but am unsure of how to proceed further.

@mixin margin ($value, $positions...){
  @each $position in $positions {
    margin-#{$position}: $value;
  }
}

.margin-top {
  @include margin(10px, top);
}
.margin-multiple {
  @include margin(10px, top, left, right);
}

When using the margin-multiple selector, if three different values are passed, they should be attached to the respective margin positions. For example, by including

@include margin(10px, 8px, 5px, top, left, right);

the expected output would look like this:

.margin-multiple {
   margin-top: 10px;
   margin-left: 8px;
   margin-right: 5px;
}

Any assistance on this matter would be greatly appreciated.

html css sass mixins scss-mixins

Answer 1

Answer №1

Consider this innovative approach:

@mixin spacing ($values, $positions) {
    @for $i from 1 through length($values) {
        space-#{nth($positions, $i)}: nth($values, $i);
    }
}

This method utilizes lists as arguments, allowing you to invoke it in the following manner:

.spacing-multiple {
    @include spacing(10px 8px 5px, top left right)
}

Upon execution, it generates the intended result:

.spacing-multiple {
    space-top: 10px;
    space-left: 8px;
    space-right: 5px;
}

Remember to maintain equal lengths for both the values and positions lists!

Answer 2

Consider this innovative approach:

@mixin spacing ($values, $positions) {
    @for $i from 1 through length($values) {
        space-#{nth($positions, $i)}: nth($values, $i);
    }
}

This method utilizes lists as arguments, allowing you to invoke it in the following manner:

.spacing-multiple {
    @include spacing(10px 8px 5px, top left right)
}

Upon execution, it generates the intended result:

.spacing-multiple {
    space-top: 10px;
    space-left: 8px;
    space-right: 5px;
}

Remember to maintain equal lengths for both the values and positions lists!

Developing sas mixins that dynamically assign values based on the margin position

Answer №1

Similar questions

Can we arrange the divs in a vertical stack instead of horizontally?

Adjust the width of the <li> element based on the quantity of its children

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

Is it necessary to always include all styles for jQuery UI separately in my project?

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

Is there a way to customize table design while utilizing render_template function in Python Flask?

How to extract text without CSS styles from strings in SQL Server

Dynamically load a JavaScript file by adding a script tag to the body of the

Contrasts between Flash and HTML5

Applying a blur effect using CSS to all divs underneath

What is the best way to incorporate a sliding div into these CSS Message Bubbles?

What steps should I take to ensure that my dropdown menu functions properly?

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

Error in Blinking Tooltip when Hovering Skill Bubble (React and d3)

Difficulty encountered in resetting progress bar post ajax form submission

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

"Place objects by dragging and dropping them within the designated block space

Passing a PHP array to a JavaScript function using a button click event in an HTML form

A guide to storing data within the client's HTML: Tips and tricks for optimal storage placement