Using Less in CSS values can sometimes involve incorporating slashes (`/`), such as in the shorthand for `font`

While working with Less and font shorthand, I came across an issue:

.font(@weight: 300, @size: 22px, @height: 32px) {
    font: @weight @size/@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}

The above code snippet resulted in an error message:

this.a.toCSS is not a function
http://localhost/tumblr/modern1/css/style.less on line 1, column 0:
1. @highlight: #cb1e16;
2. @shade1: #cb1e16;

However, when I separated the properties, it worked fine:

.font(@weight: 300, @size: 22px, @height: 32px) {
  font-weight: @weight;
  font-size: @size;
  line-height: @height;
  font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

I believe the issue lies with the slash (/) causing a problem. Since Less can perform calculations like 2px + 5 = 7px, it may be attempting to divide instead.

cssless

Answer №1

Recently encountered a problem similar to this one, and found that the escape function (specifically for less.js) is: e() It should be implemented like so 

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Answer №2

The forward slash / character is responsible for the LESS compiler dividing your font size by your line height. To address this issue, you can take the following steps:

  1. Separate your CSS into individual rules instead of using shorthand notation:

    font-size: @size; line-height: @height;

  2. You can escape certain parts or all of your LESS font shorthand rule. The slash / itself is a good candidate for escaping. You have options such as using the e function like e("/"), the tilde-quote method like ~"/", or employing the LESS string interpolation syntax with @{} to incorporate variables.

Give these solutions a try:

font: @weight @size~"/"@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Or experiment with this alternative approach:

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Answer №3

Starting from LESS version 1.4, there is a new "strictMath" option that helps to resolve any confusion between and font shorthand. Initially disabled in 1.4 for ease of transition, this feature will be enabled by default in future updates.

To learn more about the changes in version 1.4, check out the release notes.

When strictMath mode is turned on, all math operations must be enclosed in parentheses like this: (10px / 5px). This prevents the forward slash in font shorthand from being mistaken as division.

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

Navigating to a Website Based on the Selected Option in a Drop-Down Menu

I am currently working on a form that includes options for selecting a city and social networking site. The goal is to collect information about both the selected city and social network so that it can be stored for future reference. Upon submitting the fo ...

javascripthtmlcss

I have the ability to shift text 50 pixels to the left

My navigation bar is currently aligned to the left, but I'm looking to move the text 50px from the left. Is there a way to achieve this? .navigation { width: 100%; height:35px; background-color: #f1b500; /*f2c255*/ margin-top: 4.4em; } .navig ...

htmlcss

The container is not adjusting to the screen size correctly and the flex-direction: row is not functioning as

Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me. No matter what I try, I can't seem to get this container to take up the whole screen width. Variou ...

htmlcssangularflexbox

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Can CSS be used to generate these shadows?

Check out this image I made showcasing a board with an elongated shadow cast behind it. The intention is to emulate the look of the board leaning against a wall, resulting in a triangular shadow on either side. I'm curious if it's achievable to ...

css

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

Tips for creating space between two fluid divs

I'm currently facing an issue with the spacing between two child divs inside a parent div. The web page needs to be responsive for different screen widths, but the vertical space between the left and right divs is not behaving as expected. I am using ...

jquerycsspositioninghtml

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

cssangularjsangularjs-directive

Unexpectedly, CSS is failing to override React-Bootstrap and Bootstrap as intended

Currently, I am tackling a project that involves utilizing react-bootstrap along with my own custom CSS for styling. Both are imported in my index.js file as shown below: import React from 'react'; import ReactDOM from 'react-dom'; impo ...

cssreactjsreact-bootstrap

Troubles with NextJS and TailwindCSS Styling

I encountered a strange issue when I used the component separately. Here's how the code looked like: <> <Head> <title>Staycation | Home</title> <meta name="viewport" content="initial- ...

javascriptcssreactjsnext.jstailwind-css

Eliminate the outline of the pager row in an asp.net grid view

Within my grid view, I have applied a bottom border to all cells. However, this border is also appearing on the pager row, which is not desired. To address this issue, I attempted to use jQuery to remove the border, but it seems that my selector is incorre ...

jqueryasp.netcssgridview

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

An always-visible navigation menu

After exploring various resources related to the same topic, such as sticky navigation bars and others, I noticed that all the solutions provided involved the use of this link http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js. However, inc ...

jquerycssuinavigationbar

Positioning Bug in FF/IE with Absolute Placement

It appears that Chrome is the only browser displaying my code correctly. While testing in Firefox and Internet Explorer, I have noticed that my position:absolute is being affected by the border size, unlike in Chrome where it remains unaffected (which is ...

htmlcss

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

Partial button clickability issue

There is a puzzling error where the button in the 'red area' is not clickable, and I can't seem to figure out why. Below are images illustrating the issue: https://i.stack.imgur.com/aPfcR.png https://i.stack.imgur.com/v5knZ.png Upon reac ...

htmlcssreactjsbuttonsass

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

javascriptjqueryhtmlcssforms

Chrome (on both Linux and Windows) is not compatible with CSS

Here is the code snippet I am currently working with: <style type="text/css"> div { margin: 100px auto; width: 0px; height: 0px; border-right: 30px solid transparent; border-top: 30px solid red; border-left: 30px solid red; border-bottom: 3 ...

windowslinuxfirefoxcss

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

I'm facing an issue with the loading time of a Facebook post on my webpage index.php. The current method of using the embedded post provided by Facebook is taking too long to load. My solution is to create a separate page, post.php, where only the Fac ...

javascriptphphtmlcssiframe