Less - String Functions

LESS - String Functions

Description

LESS provides several built-in functions for manipulating strings. These functions are useful for tasks such as URL encoding, dynamic string generation, escaping special characters for CSS, formatting text, and replacing substrings. These capabilities allow for more dynamic and flexible stylesheet generation.

Here are some of the commonly used string functions in LESS:

Sr.No.	Function & Description	Example (Conceptual LESS and Output)
1	escape(string) URL-encodes special characters in a string, making it safe for use in URLs. For example, spaces become %20, and ! becomes %21.	escape(“Hello!! welcome to http://example.com?q=less rocks”);
// Output: “Hello%21%21%20welcome%20to%20http%3A%2F%2Fexample.com%3Fq%3Dless%20rocks”
2	e(string) Takes a string as input and outputs its content directly into the CSS without quotes (it ‘escapes’ LESS’s string handling). This is useful for outputting CSS values that LESS might otherwise misinterpret or for values that must not be quoted in CSS.	filter: e(“progid:DXImageTransform.Microsoft.Alpha(opacity=50)”);
// Output: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

// Modern alternative for simple string interpolation (often preferred):
@my-font-stack: "Helvetica Neue", Arial, sans-serif;
font-family: ~"@{my-font-stack}";
// Output: font-family: Helvetica Neue, Arial, sans-serif; | | 3 | %(string, arguments...) or sprintf(string, arguments...)
Formats a string by replacing placeholders with provided arguments. Similar to `sprintf` in other languages.
Placeholders:
`%s` - inserts argument as a string.
`%d` - inserts argument as an integer (decimal part truncated).
`%a` - inserts argument as is (stringified if not a string, keeps quotes if it's a quoted string).
`%S`, `%D`, `%A` - escaped versions. | format-example: %("Path: %s, Count: %d, Status: %a", "/img/logo.png", 5.8, 'active');
// Output: format-example: "Path: /img/logo.png, Count: 5, Status: 'active'";

@image-path: "/assets/images";
background-image: url(%( "%s/background.jpg", @image-path));
// Output: background-image: url("/assets/images/background.jpg"); | | 4 | replace(string, pattern, replacement, flags)
Replaces parts of a string that match a pattern (string or regular expression) with a replacement string. Optional regex flags (e.g., `i` for case-insensitive, `g` for global) can be provided. | // Simple string replacement:
replace("Hello, World!", "World", "LESS", "");
// Output: "Hello, LESS!"

// Regex replacement (remove all digits, global flag 'g'):
replace("Product-123-Version-45", "\\d+", "", "g");
// Output: "Product--Version-"

// Regex replacement, case-insensitive 'i':
replace("Image.JPG", "\\.jpg$", ".png", "i");
// Output: "Image.png" |

Additional Notes:

• String Interpolation @{variable}: This is the most common way to insert variable values into strings: @path: "images"; background: url("@{path}/bg.png"); results in background: url("images/bg.png");.
• Tilde-escaping ~"...": To output a string value without quotes and without LESS trying to interpret its contents, use tilde-escaping: filter: ~"ms:alwaysHasAlpha(true)";.

Choosing the right string manipulation technique depends on the specific requirements, but understanding these functions and interpolation methods provides powerful control over CSS output.