MNIEJ - Operacje

Opis

LESS obsługuje niektóre operacje arytmetyczne, takie jak plus (+), minus (-), mnożenie (*) i dzielenie (/) i mogą operować na dowolnej liczbie, kolorze lub zmiennej. Operacje oszczędzają dużo czasu, gdy używasz zmiennych i masz ochotę pracować nad prostą matematyką.

Przykład

Poniższy przykład demonstruje użycie operacji w pliku LESS -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Następnie utwórz plik style.less .

bezszyjkowy

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

Możesz skompilować plik style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

Zapisz powyższy kod HTML w pliku operations.html plik.
Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.