Các phép toán toán học trong LESS
Trong ngôn ngữ LESS, bạn có thể thực hiện các phép toán toán học trên các biến và các giá trị khác nhau. Chúng ta hãy xem qua các ví dụ.
Ví dụ
Cộng hai giá trị:
p {
font-size: 5px + 10px;
}
Kết quả biên dịch:
p {
font-size: 15px;
}
Ví dụ
Trừ một giá trị khỏi giá trị khác:
p {
font-size: 25px - 10px;
}
Kết quả biên dịch:
p {
font-size: 15px;
}
Ví dụ
Nhân một giá trị với một số:
p {
font-size: 5px * 5;
}
Kết quả biên dịch:
p {
font-size: 25px;
}
Ví dụ
Chia một giá trị cho một số:
div {
width: 100% / 3;
}
Kết quả biên dịch:
div {
width: 33.33333333%;
}
Ví dụ
Cộng thêm một giá trị vào nội dung của biến:
@var: 100px;
div {
width: @var + 100px;
}
Kết quả biên dịch:
div {
width: 200px;
}
Ví dụ
Cộng hai biến:
@var1: 100px;
@var2: 200px;
div {
width: @var1 + @var2;
}
Kết quả biên dịch:
div {
width: 300px;
}
Ví dụ
Khi thử thực hiện phép toán với các đơn vị khác nhau, LESS sẽ chuyển đổi tất cả đơn vị về một đơn vị - đơn vị đầu tiên. Ví dụ:
div {
width: 100% - 10px;
}
Kết quả biên dịch:
div {
width: 90%;
}
Bài tập thực hành
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
width: 100px * 2;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
#block {
width: 200px / 3;
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:
@var1: 500px;
@var2: 5;
#block {
width: @var1 / @var2;
}
