Các phép toán toán học trong SASS

Trong ngôn ngữ SASS, 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. Hãy cùng 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;
}

Trừ một giá trị khỏi một giá trị khác:

p {
	font-size: 25px - 10px;
}

Kết quả biên dịch:

p {
	font-size: 15px;
}

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;
}

Chia một giá trị cho một số:

div {
	width: 100% / 3;
}

Kết quả biên dịch:

div {
	width: 33.33333333%;
}

Cộng thêm một giá trị vào nội dung của một biến:

$var: 100px;

div {
	width: $var + 100px;
}

Kết quả biên dịch:

div {
	width: 200px;
}

Cộng hai biến:

$var1: 100px;
$var2: 200px;

div {
	width: $var1 + $var2;
}

Kết quả biên dịch:

div {
	width: 300px;
}

Khi thử thực hiện phép toán với các đơn vị khác nhau, SCSS sẽ chuyển đổi tất cả các đơn vị về một đơn vị duy nhất - đơn vị đầu tiên. Ví dụ:

div {
	width: 100% - 10px;
}

Kết quả biên dịch:

div {
	width: 90%;
}

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;
}