1

I tried to make a LESS class to use in a project that rotates the viewport:

.vertical-display (@x:vw,@y:vh) {
    .video-container {
        width: 100@x;
        height: 80@y;
        padding: 1@y;

        video {
            max-height: 75@y;
        }
    }

When i render this with less i get spaced attributes like: width: 100 vw;

how can I get rid of this space this using less?

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
Vinícius Rodrigues Piva
  • 11
  • 1

1 Answers1

-1
.vertical-display (@x:vw,@y:vh) {
  .video-container {
    width: unit(100, @x);
    height: unit(80, @y);
    padding: unit(1, @y);

    video {
      max-height: unit(75, @y);
    }
  }
}

Will output as you desire however there if you want to pass in percent as the unit you will have to pass it in as an escaped string .vertical-display(~'%', ~'%');.

FlightOfGrey
  • 345
  • 4
  • 16
  • See https://stackoverflow.com/questions/21932983/variable-from-string-interpolation-returns-a-non-unit-value/21935278. – seven-phases-max Sep 13 '18 at 06:47
  • I don't understand your comment or downvote @seven-phases-max. Could you please elaborate? I don't see how variable references are needed in this instance or provide any extra functionality relevant to this situation. We want the variables @x and @y both treated a string, we don't need to do any thing with the result, it just needs to concatenate effectively two strings and even if you use a variable reference you still are required to provide percent as a string. You also can't use the `unit(100, @x)` LESS function as it won't work with % being passed in. – FlightOfGrey Sep 13 '18 at 10:47
  • "it just needs to concatenate effectively two strings" - No that's the main and quite common mistake. Adding a *unit* to a *number* is not about concatenating "two *strings*" - it's really about "*adding a *unit* to a *number*" (see the end of the answer for more details and links for more details). While interpolation does the trick in simple cases it's the most ugly and the most improper method for this. – seven-phases-max Sep 13 '18 at 13:44
  • *"You also can't use the unit(100, @x) Less function as it won't work with % being passed in."* - also wrong - there's no restrictions on unit within the function (just `unit(100, %)` won't work because "naked" `%` is itself an invalid string in Less (so you'll need to escape `%` first), but counting your example of `unit(100, @x)` and the Q itself the limitation can't even affect anything here). Either way the question has so many duplicates here at SO (I'm sure I can find tens of them) so answering it deserves its own downvote regardless if it's suggesting the most improper method. – seven-phases-max Sep 13 '18 at 13:50
  • Ok thank you for actually explaining my misunderstanding of how things worked, that was useful and I have updated my answer. – FlightOfGrey Sep 13 '18 at 21:54
  • However the link you initially posted of one of your previous answers is answering a different problem? And the links within your answer on that question also answer different problems, how to pass in multiple arguments to a mixin (not the issue in this instance), negating and adding a static unit (where the answers require you to multiply the value by the 1 of the unit - which if you have to pass in percent as an escaped string doesn't work?). – FlightOfGrey Sep 13 '18 at 21:56
  • *However the link you initially posted of one of your previous answers is answering a different problem?* - The half of the answer is about this thing. I only posted it FYI because it describes in short what's wrong with interpolation in such cases and in the end it has a list of related stuff with more details. – seven-phases-max Sep 14 '18 at 09:48