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

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Regular expression for matching zero's following a decimal

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

I'm having trouble installing axios using npm

I am looking to develop a CLI application in NodeJS that has the capability to clear the terminal while running and then restore it back

Fade in elements individually with the jQuery Waypoints plugin

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

What causes the image to not appear at the center bottom of the page when using IE for loading?

Understanding the specific types of subclasses derived from an abstract generic class in Typescript

Is there a way to trigger the vue-cli build command automatically when specific files are modified?

Dealing with 404 page not found error without replacing the default in Next.js 13

JS: delay onClick function execution until a page refresh occurs

Tips for pinpointing parent elements within a group of various sub child elements

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Encountering a 404 error when attempting to access static files within a directory using Express Js

Modify the hue of the div as soon as a button on a separate webpage is

Preview multiple images while uploading in a React JS application

The integrity verification for "anymatch" has not passed (the calculated integrity does not align with our records, received)

Having trouble accessing the root route in production environment

Dispensing guarantees with Protractor