How do I change only one argument in Less mixins?

Question

I want to use a Polymorphism mixin in Less, I have set default values for my parameters, regarding that both the Polymorphism mixins have different number of parameters, when using the mixin for different elements, I wonder if I can only assign one specific parameter value and let the others keep their default values. For instance, here I have two Ploymorphism mixins ,.testMixin., and .box_1 and .box_2 using them respectively, having not given arguments for .box_1's mixin, the compiled CSS includes both mixins with the given default values. But I have assigned the only argument 10 to the mixin of .box_2, and it has set the first parameter of both mixins to 10, and kept the other parameters values', if available. Here are the questions: First, What should I do in order to assign the second parameter of the second mixin to a value, keeping both the first and third parameters to their default values? Second, How can I only use one of the polymorphism mixins? regarding that polymorphism mixins are used with respect to the number of arguments they are given.

.testMix(@f-size:2){
  font-size: (@f-size * 10px);
}

.testMix(@h:300, @s:70%, @l:50%){
  color: hsl(@h, @s, @l);
}

.box{
  &_1{
    .testMix();
  }
  &_2{
    .testMix(10);
  //  How to assign only one argument, e.g. only the second argument of first mixin
  }
}

Does this answer your question? [How to do "zoom on an image while a mouseover" when html & css are in the same editor page](https://stackoverflow.com/questions/64049671/how-to-do-zoom-on-an-image-while-a-mouseover-when-html-css-are-in-the-same-e) — MaxiGui, Dec 10 '20 at 15:48
I think what you're asking is why the container is allowing overflow. Is that right? Obviously the image _must_ be resized with a change in scale. — isherwood, Dec 10 '20 at 15:52
Yes, I need the scale overflow not to be seen, so I hit "overflow: hidden" for the container, but it still shows overflows in side paddings. — Zeinab, Dec 10 '20 at 16:03
I'd move the padding from both the container and the image to margin on the image. This gets it out of the way of your animation. — isherwood, Dec 10 '20 at 16:07
Are you working in Chrome? You might be hitting a [known bug](https://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome). [This particular answer](https://stackoverflow.com/a/27233053/1264804) looks good for you. — isherwood, Dec 10 '20 at 16:09
Yes, I should switch to margin instead of padding I guess, thanks to A Haworth, and as I have tried this on other browsers, apparently Chrome isn't the only one with this problem. — Zeinab, Dec 10 '20 at 16:42

score 2 · Answer 1 · answered Dec 10 '20 at 16:21

If I've understood correctly, what is required is for the image to become scaled but remain within its div - not to ooze out over the padding.

If you use a margin on the container rather than padding on the image then the img zooms slightly, but stays within its element.

Note: you might like to consider object-fit: contain or cover on the image rather than width/height 100% so it doesn't become distorted, but depends on your use case of course.

*,
    *::before,
    *::after{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: calc(33.33334% - 8px);
        height: 300px;
/*        border: 1px solid #000;*/
        float: right;
        overflow: hidden;
        margin: 0 8px 0 0;
    }
    .container::after{
        position: absolute;
        top: 100%;
        left: 0;
        content:"";
        width: 100%
        height: 100%;
        background-color: rgba(0,0,0,0.55);
    }
    .container:hover::after{
        top: 0;
    }
    .container:nth-child(1){
        margin-right: 0;
    }
    .container img{
        width: 100%;
        height: 100%;
        transition: 200ms;
    }
    .container:hover img{
        transform: scale(1.3);
    }

<div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg" alt=""> </div>
    <div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg.jpg" alt=""> </div>
    <div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg" alt=""> </div>

Wali Waqar · Answer 2 · 2020-12-13T09:17:55.777

Your question is a bit vague. I take it you want to zoom in on part of the image, without changing the size of the div / image, an alternative way to achieve this would be by setting the images as backgrounds of the divs, and then resizing them as done below

*,
    *::before,
    *::after{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: 30%;
        height: 200px;
        float: right;
        margin: 1%;
        overflow: hidden;
        background-image: url("https://images.ctfassets.net/hrltx12pl8hq/6jVTOtduUgVhFTP1h0MqmX/009e866bd1a3f8a965028874c58b2109/shutterstock_547563823.jpg?fit=fill&w=800&h=300");
        background-size: 100% 100%;
        background-position: center;
        transition: background-size 200ms;
    }
    .container::after{
        position: absolute;
        top: 100%;
        left: 0;
        content:"";
        width: calc(100% - 8px);
        height: 100%;
        background-color: rgba(0,0,0,0.55);
        padding: 0 8px 0 0px;
    }
    .container:hover::after{
        top: 0;
}

    .container:hover {
        background-size: 150% 150%;
    }

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <div class="container"> </div>
    <div class="container">  </div>
    <div class="container"> </div>
</body>
</html>

How do I change only one argument in Less mixins?

2 Answers2