What are alternative methods for adjusting the value of a CSS property with alternative parameters?

Question

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

When it comes to using similarities in my code, I often find myself needing a more flexible solution. For example:

.position{
  position:absolute;
  right:10px;
  top:20px;
}

This is where the idea of using a mixin comes in handy:

.position(@absolute:absolute;@top:0;@right:0;@bottom:0;@left:0){
    position: @absolute;
    top:@top;
    right: @right;
    bottom:@bottom;
    left:@left;
}

However, there are times when I don't need the right property injected into my code. So, how can I modify the mixin to achieve the following result?

.position(@absolute:absolute;@top:12px;@left:12px;@bottom:12px);
//without 'right'
.position{
    position: absolute;
    top:12px;
    bottom:12px;
    left:12px;
}

If anyone has any suggestions or solutions, I would greatly appreciate it!

css less

Answer 1

Answer №1

If you want to make changes to your mixin without any required parameters, you can do it like this:

.customize(
  @option: default;
  @setting1: false;
  @setting2: false;
  @setting3: false;
  @setting4: false
){
  option: @option;

  & when not (@setting1 = false) {
    setting1: @setting1;
  }

  & when not (@setting2 = false) {
    setting2: @setting2;
  }

  & when not (@setting3 = false) {
    setting3: @setting3;
  }

  & when not (@setting4 = false) {
    setting4: @setting4;
  }
}

Now, you can specify only the parameters that are necessary for your customization:

x {
  .customize(
    @setting1: value1, 
    @setting2: value2
  );
}

y {
  .customize(
    @setting3: value3, 
    @setting4: value4
  );
}

The generated CSS will look like this:

x {
  option: default;
  setting1: value1;
  setting2: value2;
}
y {
  option: default;
  setting3: value3;
  setting4: value4;
}

Answer 2

If you want to make changes to your mixin without any required parameters, you can do it like this:

.customize(
  @option: default;
  @setting1: false;
  @setting2: false;
  @setting3: false;
  @setting4: false
){
  option: @option;

  & when not (@setting1 = false) {
    setting1: @setting1;
  }

  & when not (@setting2 = false) {
    setting2: @setting2;
  }

  & when not (@setting3 = false) {
    setting3: @setting3;
  }

  & when not (@setting4 = false) {
    setting4: @setting4;
  }
}

Now, you can specify only the parameters that are necessary for your customization:

x {
  .customize(
    @setting1: value1, 
    @setting2: value2
  );
}

y {
  .customize(
    @setting3: value3, 
    @setting4: value4
  );
}

The generated CSS will look like this:

x {
  option: default;
  setting1: value1;
  setting2: value2;
}
y {
  option: default;
  setting3: value3;
  setting4: value4;
}

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

Answer №1

Similar questions

Expand the <div> by clicking on it, then hover away to return it to its normal size

Ways to confine the tabindex within a specific div container

Overruled fashion

Navigating with a Stuck Navigation Bar Using BootstrapretaF

Ways to present a pop-up dialog box featuring word corrections

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

Shift all content to the right when viewing on mobile devices

Guide to creating intricate animations using a CSS/JS user interface editor

Having trouble applying styles to a component using forwardRef

What is the best way to add a button over an image using Tailwind CSS in Next.js?

Modifying Background Images Dynamically with jQuery as You Scroll

When the mouse hovers over the slider, the final image jumps into view

CSS - Discovering the reason behind the movement of text post generation (animation)

What is the relationship between html, body, and window when scrolling through code?

The issue with negative margin-right is not functioning as expected on Chrome's browser

Step-by-step guide on aligning an image to the left of text in a Material UI table column

Utilization of CSS with the symbols of greater than and asterisk

Problem with keyframe animations in Internet Explorer 10

Using the HTML <span> and svg elements together does not allow them to be inline with each other

Persistent footer overlaps lower body content