The symbol of ~ in less file style of css preprocessor, what does it mean

Question

@card-prefix-cls: ~"@{css-prefix}card"; I have seen the statement in less extension file of css style (not in css file), What does the symbol tilde(~) mean in less style file?

Possible duplicate of [What does the "~" (tilde/squiggle/twiddle) CSS selector mean?](https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean) — hgb123, Dec 18 '18 at 04:07

score 3 · Answer 1 · answered Dec 18 '18 at 03:22

The symbol of tilde of ~ in less style file, it is a escaping symbol. Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

results in

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

The answer comes from less document. document link

The symbol of ~ in less file style of css preprocessor, what does it mean

1 Answers1