LESS: Using variable values in mixin and variable names

Question

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less.

I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies such as node.js, npm, grunt.js, and less.

Here is a snippet of code that showcases what I am aiming to achieve:

I have created this template: https://github.com/andrey-hohlov/template-mark-up (don't forget to use 'npm install' after cloning)

However, I am facing an issue in one step:

Place svg-icons in github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/svg-icons
Put png-icons in github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/png-icons
Utilize grunt
All sprites will be generated in github.com/andrey-hohlov/template-mark-up/tree/master/assets/build/img
.less files are created in github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/css/less/mixins/bg-icon/temp using spritesmith, which cannot be modified

Now onto the less files:

github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/datauri.less contains base64 code for svg icons with class names based on file names, only allowing me to set suffixes and prefixes
Files like github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/sprite.datauri.less include mixins and variables for creating sprite css for png icons, leveraging the width and height data from svg icons (as the datauri task provides only base64)
The issue lies in github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/bg-icon.less. There are two mixins - one for svg icons and one for png icons. I need to utilize them with the "filename" parameter to generate css for icons, but I am unsure how to do so. I have left comments in the file.

P.S. I had to remove some URLs due to my lack of reputation. P.P.S. Apologies for any language errors in my explanation :(

javascript css node.js svg less

Answer 1

Answer №1

Alright.

I am curious about how I can utilize mixin names and variable names based on another variable's value.

Therefore:

(1). If you want to reference a variable by its name stored in another variable, you can use the syntax for "Variable Referencing", like this:

#example {
    @banana: 22px;
    @potato: "banana";

    width: @@potato; // -> 22px
}

(2). Calling a mixin by a name set in a variable is not possible. To selectively invoke a mixin based on a variable value, consider using "Pattern Matching". Here’s an example:

.mixin("banana", @values...) {
    color: @values;
}

.mixin("potato", @values...) {
    background-color: @values;
}

#usage {
    .mixin("banana", tomato); // -> color: #ff6347
    .mixin("potato", wheat);  // -> background-color: #f5deb3
}

If modifying those mixins is not an option, one alternative is to create wrappers:

.mixin(peach) {.mixin-peach()}

#usage {
    @variable: peach;
    .mixin(@variable); // invokes .mixin-peach
}

Answer 2

Alright.

I am curious about how I can utilize mixin names and variable names based on another variable's value.

Therefore:

(1). If you want to reference a variable by its name stored in another variable, you can use the syntax for "Variable Referencing", like this:

#example {
    @banana: 22px;
    @potato: "banana";

    width: @@potato; // -> 22px
}

(2). Calling a mixin by a name set in a variable is not possible. To selectively invoke a mixin based on a variable value, consider using "Pattern Matching". Here’s an example:

.mixin("banana", @values...) {
    color: @values;
}

.mixin("potato", @values...) {
    background-color: @values;
}

#usage {
    .mixin("banana", tomato); // -> color: #ff6347
    .mixin("potato", wheat);  // -> background-color: #f5deb3
}

If modifying those mixins is not an option, one alternative is to create wrappers:

.mixin(peach) {.mixin-peach()}

#usage {
    @variable: peach;
    .mixin(@variable); // invokes .mixin-peach
}

LESS: Using variable values in mixin and variable names

Answer №1

Similar questions

The web forms on my shared hosting account are set up to send emails via SMTP to my designated email address, but they are unable to send to providers such as Gmail

How do I incorporate a jcarousel slider into a thickbox popup using jQuery, HTML, and CSS?

Update the function to be contained in a distinct JavaScript file - incorporating AJAX, HTML, and MySQL

Encountered an issue with mapping data from a controller to a view in Angular.js

Trouble with npm installation on Windows following node update

Challenges with Dual Y-Axis in a Horizontal Stacked Bar Graph

Transitioning from curl to jQuery's $.ajax() method

Generate a dynamic image using CSS and either a div or a span tag

HTTP / HTTPS GET Request Alexa Skill - "The result is not valid" Lambda Reply

Issues with saving data to MongoDB using NodeJS, ExpressJS, and EJS database connection

Puppeteer - Issue with Opening Calendar Widget

Issue arises after injecting HTML element into the DOM due to memory constraints and display inconsistencies

New issue with installing npm cra

Executing testing using the npm command line

Is there a way to transform a time string, for instance "8:02 AM", into a sortable field?

"Uncovering the dangers of XMLHttpRequest: How automatic web-page refresh can lead

Encountering an issue with running the React Application due to an error when

Attempting to implement usedispatch hook in combination with userefs, however, encountering issues with functionality

Can you explain the contrast between uploading files with FileReader versus FormData?

The lengthy email exceeds its limits