1

I've come across the ~ symbol being used in LESS whilst browsing the web, I have a general understanding of what it does, but can someone make it clear or point me to some documentation, as I can't find any?

As far as I'm aware, it removes the ' characters from around a string?

For example, my current less

_variables.less

@onMobile: '(max-width: 768px)';

_styles.less

.my-button {
  @media @onMobile {
     width:100%;
  }
}

The above code outputs

@media '(max-width: 768px)';

which then breaks my CSS. But if in my _variables.less I do

@onMobile: ~'(max-width: 768px)';

instead, it outputs

@media (max-width: 768px);

which then works.

Can someone please clarify what the symbol does exactly and if there are any other uses for it?

AgentP
  • 6,261
  • 2
  • 31
  • 52
S_R
  • 1,818
  • 4
  • 27
  • 63

1 Answers1

-1

The ~ in LESS is used to interpret the string that follows it as it is. No adaptions has to be made with it. That is because LESS parses the file and can encounter errors if you do the following (simplified example);

.transition2x( @props ) {
  transition: @props;
}

.element {
  .transition2x(width 2s, height 2s)
}

The intend of the transition2x is to have a transition of an element to a new dimension in 2 seconds.

However, when parsing the above block in LESS, it will encounter a syntax error. The main culprit is the little , in the above. LESS takes that character as a separator for argument, so it thinks that .transition2x has two arguments. But there is only one expected. So LESS does not know what to do.

A starter in LESS may think "oh, let's see if it gets fixed if we put quotes around it" by 

.element {
  .transition2x("width 2s, height 2s")
}

But, when parsing LESS, we get as end result the following CSS rule

transition: "width 2s, height 2s";

which is not what we want. It may be a valid CSS (gets parsed) but the animation keyframes aren't built with this. What you get is a sudden hop in dimension without any animation.

That is where the ~ comes into the play. If we add it in front of our quoted string,

.element {
  .transition2x(~"width 2s, height 2s")
}

then we are saying LESS "hey fam, I want you to see this literally, don't parse it". The end result of that is 

transition: width 2s, height 2s;

which is the right CSS syntax. That adds animation keyframes.

That is what ~ before any string does in LESS: "get this string, don't interpret it and strip its quotes".

KarelG
  • 5,176
  • 4
  • 33
  • 49
  • This is awful ancient abuse techniques. To pass comma separated values as one argument you just use the [semicolon arg separator](https://stackoverflow.com/a/21011089/2712740). Never the dreadful *values -> quoted string -> unquoted string* conversion. – seven-phases-max Sep 02 '19 at 12:00
  • @seven-phases-max I only replied to the question. I did not even formulated an opinion on it. People can use the string function [`e`](http://lesscss.org/functions/#string-functions-e) to solve it. – KarelG Sep 02 '19 at 12:07
  • If you want an issue free answer you need just explain that Less can't parse `(max-width: 768px)` as a proper variable value. Hence the need for `~""` there. The comma in mixin arguments is a bad example. – seven-phases-max Sep 02 '19 at 12:23
  • The point is that you should not use any quotes for your `width 2s, height 2s` value *AT ALL* (thus no `~"..."`, `~'....'`, `e()` or similar dirt is necessary in your example). Your transition mixin call should go as `.transition2x(width 2s, height 2s;);` (that way the comma is not interpreted there as a mixin argument separator). I always almost uncoditionally downvote answers/comments advertising the `~''` syntax *unreasonably* (Unfortunately this kludge spreaded too wide at earlier Less days so one has to be very harsh on getting rid of it even after ~6...7 years the hack became obsolete). – seven-phases-max Sep 02 '19 at 12:26