Is there a way to alter the unit of several numerical values within a Less mixin?

I am currently experimenting with creating a mixin that allows for switching units from px to rem. Here is the code I have so far:

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.padding(@padding) {padding: @padding * @pxr;}

.test {.padding(10px);}

While this setup functions correctly with single values in the mixin, it fails when dealing with multiple numbers. For example, the following does NOT work:

.test {.padding(10px 25px);}

I am struggling to find a solution to make this work in Less.

csslessmixinsless-mixins

Answer №1

Choice 1

To simplify your code, you can utilize comma-separated values as shown below:

@fontSize : 16px;
@ratio    : 1 / unit(@fontSize, rem);

.padding(@toppad, @sidepad) {
      padding: (@toppad * @ratio) (@sidepad * @ratio);
}

.example {
      .padding(10px, 25px);
}

View the result

Choice 2

Have you considered using two separate functions for better organization?

@fontSize : 16px;
@ratio    : 1 / unit(@fontSize, rem);

.vertPadding(@vertPad) {
       padding-top: @vertPad * @ratio; 
       padding-bottom: @vertPad * @ratio;
}
.horzPadding(@horzPad) {
       padding-left: @horzPad * @ratio;
       padding-right: @horzPad * @ratio;
}

.example {
       .vertPadding(10px);
       .horzPadding(25px);
}

See it in action

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for displaying HTML elements beyond the boundaries of an iframe

Similar Inquiry: How can content from an IFRAME overflow onto the parent frame? I am in search of a potential solution for the following issue: There is a specific element with the style "position: absolute" within a page loaded into an iframe. Based ...

htmlcssiframexhtml

css - adjust flex box to cover half of the screen and increase its size

I'm having trouble getting my CSS Flex-box to stretch the full height of the right side of the screen from the center. I want it to cover the entire right half of the screen at full height. https://www.cajsoft.co.uk/test/visitor2.html Any help with m ...

htmlcss

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

Optimizing Container size for devices with smaller screens

After creating a container with a panel and a panel body, everything looked fine when viewed on desktop. However, upon checking it on my phone, I noticed a large space on the right with nothing there. If you'd like to see an image of the issue, click ...

htmlcsstwitter-bootstrap

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

htmlcss

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...

cssvue.jssass

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

Deletion of ::before and ::after pseudo-elements upon addition of the class is-sticky

One issue I'm facing is that when the class is-sticky is applied to my menu, the ::before and ::after pseudo-elements on my logo become unnecessary. As I am not very proficient in JQuery, I have been unable to resolve this by searching online. The HT ...

htmljquerycssversion-control

Align three or more Font Awesome icons in a row at the center

When it comes to center aligning an icon, I typically use margin: auto;, text-align: center;, or left: 50%; transform: translateX(-50%);. However, I've run into a hurdle trying to center align three icons together. I thought applying these techniques ...

htmlcssless

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

javascriptcssvue.jsvuetify.jsnuxt.js

Issues with CSS columns in Firefox version 22 have been causing some problems

Trying out css columns: implementing columned content with a wrapper div: Click here to view the demo Everything seems to work fine in webkit and older versions, but in Firefox v22 there seems to be an issue (no columns displayed and behavior varies with ...

cssfirefox

What are the best solutions for resolving inconsistent column spacing within a bootstrap accordion card header?

I am experiencing a spacing issue with my Bootstrap 4 accordion. The issue arises when the text in the second column of each card header row increases in length, causing inconsistent spacing between the columns. This inconsistency is particularly noticea ...

htmlcssbootstrap-4accordion

What steps can I take to integrate Google reCAPTCHA into my website?

Contact Form <section id="contact" class="contact-area"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-6"> ...

javascriptphphtmlcss

Jquery panoramic slider - Dynamically adjusting image width to fit screen size

Currently, I am attempting to implement a popular panning slider called Jquery Panning Slider for a website. The details regarding the markup structure, CSS, and jQuery can be found here: Slider Details. However, I encountered an issue with this slider. ...

jquerycssjquery-pluginssliderfullscreen

React component not extending to the bottom of the screen

Within my Index.js file, I have created an Index component that includes a navbar and a landing page layout. I aim to have a showcase section taking up 40% of the width, with the remaining 60% dedicated to a react-bootstrap carousel. The Index component sh ...

htmlcssreactjsreact-bootstrapbootstrap-5

Adjustable div height: reduce until reaching a certain point and then begin expanding once more

Incorporating a hero section to display content is my current approach. The design adapts responsively utilizing the padding-bottom percentage strategy, along with an inner container that is absolutely positioned for central alignment of the content. The ...

javascriptjquerycssresponsive-design

What are the steps to properly create an ordered list?

.book-summary ol { counter-reset: item ; } .book-summary ol li { margin-left:10px; margin-top:5px; display:block; } .book-summary ol li:before { content: counters(item, ".") " "; counter-increment: item; } <div class="book-summary"> ...

htmlcss

Shrinking my content on mobile devices with the use of "<p>" tag

I've noticed my footer, header, and forms shrink on mobile devices, but the text on my privacy pages remains the same size. Is there an easy way to make this text shrink as well? Thank you .content { border: 1px solid transparent; margi ...

htmlcss

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css