- Ví dụ:
css
.class{ height: calc(30px + 50px); }.class { height: calc(30px + 50px); }
Nhưng tại sao chúng ta cần nó ở đây?
Hàm calc() cung cấp giải pháp tốt hơn vì lý do sau. Chúng ta có thể kết hợp các đơn vị khác nhau. Cụ thể, ta có thể trộn các đơn vị tương đối như phần trăm và viewport. Các đơn vị này sẽ được trộn với các đơn vị tuyệt đối như pixel. Ví dụ, ta có thể tạo một biểu thức để trừ giá trị pixel từ phần trăm.
- Ví dụ:
css
.class { width: calc(50% + 30px); }.class { width: calc(50% + 30px); }
Hãy xem xét trường hợp của chúng ta, đó là trừ px từ %. Sử dụng hàm calc() trong code SCSS, chúng ta có thể dễ dàng trừ hai đơn vị khác nhau.
- Ví dụ:
css
.class { height: calc(50% - 20px); }.class { height: calc(50% - 20px); }
Đôi khi, nếu các giá trị của bạn nằm trong biến, bạn cần sử dụng interpolation. Interpolation để biến chúng thành chuỗi.
- Ví dụ:
html
$x: 50%; $y: 20px; .class { width: calc(#{$x} - #{$y}); }.class { height: calc(50% - 20px); }
.class {
width: calc(50vmax + 3rem);
padding: calc(1vw + 1em);
transform: rotate( calc(1turn + 28deg));
background: hsl(100, calc(3 * 20%), 40%);
font-size: calc(50vw / 3);
}
.class {
width: calc(50vmax + 3rem);
padding: calc(1vw + 1em);
transform: rotate(calc(1turn + 28deg));
background: hsl(100, calc(3 * 20%), 40%);
font-size: calc(50vw / 3);
}