მათემატიკური ოპერაციების გაუქმება LESS-ში

ზოგჯერ არის სიტუაციები, როდესაც ჩვენ გვაქვს გარკვეული მათემატიკური ოპერაცია, რომელიც არ უნდა აღიქმებოდეს LESS-ის მიერ, როგორც გამოთვლის ბრძანება. მაგალითად, ასეთი პრობლემა წარმოიქმნება CSS ფუნქციაში calc:

styles.lessdiv {
  width: calc(100% - 10px);
}

საბედნიეროდ, LESS-ს შეუძლია ასეთი ადგილების კორექტულად დამუშავება და არ შეასრულოს გამოთვლა კომპილაციის დროს.

თუმცა, ხდება სიტუაციები, როდესაც გამოხატულება, რომელიც არ საჭიროებს გამოთვლას, მდებარეობს სხვა ადგილას, მაგალითად, ცვლადში, აი ასე:

styles.less@exp: 100% - 10px;
div {
  width: calc(@exp);
}

ამ შემთხვევაში ცვლადში ჩაიწერება გამოთვლის შედეგი, და calc-ში გაიგზავნება ცვლადი გამოთვლილი მნიშვნელობით. იმისათვის, რომ ეს არ მოხდეს, ჩვენ შეგვიძლია მივუთითოთ, რომ გამოხატულება უნდა დარჩეს უცვლელად.

ამისათვის გამოხატულება უნდა ჩავსვათ ბრჭყალებში და მის წინ დავსვათ tilde-ის ნიშანი:

styles.less@exp: ~'100% - 10px';
div {
  width: calc(@exp);
}

Задание 1

გაასწორეთ კოდი ისე, რომ იგი იმუშაოს კორექტულ გზით:

styles.less@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
  width: calc(@exp1);
  margin-top: calc(@exp2);
}