Slashes ('/') in CSS Values When Using Less (E.G. in 'Font' Shorthand)

Slashes (`/`) in CSS values when using Less (e.g. in `font` shorthand)

Just ran into this issue, the escape function (for less.js anyway) is:
e()
Like this

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

Size of font in CSS with slash

This actually sets two properties and is equivalent to:

font-size: 100%;
line-height: 120%;

To quote the official documentation:

The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

As David M said in the comments, it mirrors the typesetting tradition of specifying typeface sizes as “x pt on y pt” to denote the glyph size on line height.

But the example in your question is actually wrong and would be ignored by the browser: you can only combine these two properties in the font shorthand notation, and you must specify at least both the font size and family. Simply writing font: 100%/120%; is therefore not enough; you could add a generic family name to make it valid though, e.g.:

font: 100%/120% serif;

Use LESS to factor out a CSS rule (e.g. font-size: 20px; )

1. Define the mixin. While the leading . makes it look like a class selector, it's just how naming mixins works in LESS.

   .large-text() {
     font-size: 20px;
   }
   

2. You include a mixin by just writing the name of the mixin. In this case it's .large-text.

   .MyAwesomeTitle {
     color: red;
     .large-text
   }
   

The docs give an example under "parametric mixins"

Input:

.wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

Output:

pre {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Issue with 'em' value in CSS

when you define

font: 1.1em/1.5 ... ;

you're using a shorthand property where the first value is the font-size and the second value is the line-height (which can be also unitless)

CSS grid-row attribute compiled incorrectly by Less

You need to use Escaping

grid-row: e("1 / 3");

How to write border-radius in less without dividing result

This could be due to not having strict maths turned on in the compiler which tells it to only run maths within parenthesis.

An alternative is to trick the system into thinking its a normal string instead of a calculation.

border-radius: 10px ~"/" 20px;

Codepen Example

How to prevent division when using variables separated by a slash in CSS property values

Use the #{} interpolation notation to treat your variables as strings. Since Sass cannot perform arithmetic on strings, the / gets treated as a literal slash instead of the division operator:

@mixin test($fontsize, $lineheight) {
    font: #{$fontsize}/#{$lineheight} sans-serif;
}

CSS grid-row attribute compiled incorrectly by Less

You need to use Escaping

grid-row: e("1 / 3");

LESS variable changes depending on context?

in Less >= 1.4.0 you need to use math operations in brackets by default (thats's by design, but can be changed in the Less settings). Your code would work perfectly fine in older versions of Less.

So if you write in Less:

.info {
    @infoHeight: 22px;
    @infoTopPadding: 2px;
    @infoLineHeight: (@infoHeight - @infoTopPadding);
    margin: @infoLineHeight;
    font: bold 13px~'/'@infoLineHeight Arial, sans-serif;
}

the CSS output becomes:

.info {
  margin: 20px;
  font: bold 13px / 20px Arial, sans-serif;
}

I hope this is your desired/expected outcome.

How to add dynamic font shorthand properties in scss with @mixin?

Here is the reference for font shorthand for scss.
https://www.sitepoint.com/sass-basics-operators/

The solution is

@mixin title($cat-font: 12px, $line-height: 18px) {
        font: normal #{$cat-font} / #{$line-height} 'Open Sans', serif;
}

a.title{
  @include title();
}

You will see in the css is:

a.title{
   font: normal 12px/18px 'Open Sans', serif;
}

Reference:

font-size: 16px / 24px // Outputs as CSS

    font-size: (16px / 24px) // Uses parentheses, does division

    font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS

    font-size: $base-size / $line-height // Uses variables, does division

    opacity: random(4) / 5; // Uses a function, does division

    padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division

---

Related Topics