Hàm calc() bạn đã thử chưa ??

Hàm calc() chắc không còn quá xa lạ với người đúng không ạ, trước đây mình có học cơ qua về css thì không biết đến hàm này. Cách đây đôi tháng có thời gian và được 1 trong dự án suggest dùng thì mình tìm hiểu sâu hơn. Sau đó thì thấy khá nhiều điều thú vị mọi người ạ. Trước đây việc chia layout sau cho hợp lý chính xác đối với mình khá khó. Nhưng sau khi biết đến hàm tính toán này trong css, thì mình thấy việc chia layout, tính toán các đơn vị khác nhau rất nhanh và hiệu quả. Đây cũng là một trong những điểm nổi bật nhất của hàm tính toán calc() này đó ạ Nào chúng ta cùng nhau tìm hiểu nhé !!!!!!!!!

Hàm calc() là hàm gì nhỉ ??

1. Định nghĩa

Hàm calc() được định nghĩa là một hàm tính toán được sử dụng của css, là một hàm mà ta có thể thao tác với các phép tính toán, đặc biệt hơn nữa là có thể thực hiện phép toán với các dơn vị khác nhau.

2. Cú pháp

  font-size: calc(3vw + 2px);
  width: calc(100% - 20px);
  height: calc(100vh - 20px);
  padding:calc(1vw + 5px);

Cách sử dụng và các ứng dụng

1. Sử dụng tính toán với nhiều loại đơn vị khác nhau

Tính năng nổi bật và mạnh nhất của hàm tính toán calc(), chính là việc bạn có thể thực hiện tính toán với những đơn vị khác nhau một các dễ dàng mà không cần phải quy đổi trước khi tính toán ví dụ như việc bạn chia layout phần trăm, responsive hợp lý, vẫn đảm bảo được khoảng cách padding hay margin một cách chính xác nhé. Cúng bắt tay ngay vào ví dụ thôi nào

  width: calc(100% - 20px);
  transform: rotate(calc(1turn + 45deg));
  animation-delay: calc(1s + 15ms);
  line-height: calc(1.2 * 1.2)

Không chỉ có bây nhiêu thôi, bạn có thể sử dụng tính toán với các đơn vị khác nhau dưới đây

 px % em rem trong mm cm ptch

Hay với các đơn vị tính toán của máy tính như

vh vw vmin vmax

mọi thứ trở nên dễ dàng hơn với việc sử dụng hàm tính toán này

2. Sử dụng được những thuộc tính nào

Bạn nghĩ gì về việc sử dụng tính toán như thế nào chỉ cho chiều rộng để chia layout như mình giới thiệu bên trên thế thì bạn nhầm rùi đó. Việc linh hoạt trong cách sử dụng hàm tính toán được sử dụng khéo léo thì bạn có thể áp dụng được trong khá nhiều các thuộc tính của css. Cùng xem một số thuộc tính có thể sủ dụng nhé

 font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);   

Hoặc ta có thể sử dụng một phấn như sau

  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);

3. Các toán tử được sử dụng

• Phép cộng và phép trừ

  ví dụ :
    margin: calc(10px + 10px);
    margin: calc(10px + 5);
  

• Phép chia

  ví dụ:
    margin: calc(30px / 3);
    margin: calc(30px / 10px);
  

• Phép nhân

  margin: calc(10px * 3);
   margin: calc(3 * 10px);
   margin: calc(30px * 3px);
  
  

4. HIển thị tính toán số liệu một cách tương quan

Việc nghĩ sao khi bạn chia độ rộng của layout một cách tương quan, số liệu nhìn dễ hiểu. Nói thế thì cũng hơi mơ hồ nhỉ, nếu nói đơn giản hơn, nếu layout của chúng ta chia làm 4 phần bằng nhau, mỗi 1 phần sẽ là 25% điều này cũng có gỉ để đáng nói. Nếu bạn chia lyout thành 3 phần hay 7 phần chẳng phần, nếu dùng máy tính tính toán sơ sơ thì 3 phần mỗi phần sẽ là (33,33333%) sô 3 kéo daifiiiiiii đúng ko ạ . Nếu chúng ta biết xử dụng hàm một cách hợp lý nhưu ví dụ sau đây, bạn thấy dễ hiểu hơn rất nhiều đó nhé Thây vì chia như thế này

.column-1-7 {
   width: 14.2857%
}
.column-2-7 {
   width: 28.5714%
}
.column-3-7 {
   width: 42.8571%
}

thì ta có thể sử dụng hàm tính toán calc(), độ chính xác tương quan bạn sẽ thấy ngay sự khác biệt

 .column-1-7 {
   width: calc(100% / 7);
}
.column-2-7 {
   width: calc(100% / 7 * 2);
}
.column-3-7 {
   width: calc(100% / 7 * 3);
}

hay thay vì để như này

.content {
  width: 100%;
  &__col-3 {
   width: 33.333%;
  }
}

Ta viết một cách khác như sau

.content {
  width: 100%;
  &__col-3 {
   width: calc(100% / 3);
  }
}

sử dụng khéo léo thì rất ok đúng không mọi người !!!!!!!!

Kết Luận và tái liệu tham khảo

Thực thự hàm tính toán này mình thấy không quá xa lạ với mọi người, nhưng nếu chúng ta biết sử dụng một cách khéo léo, thì việc css sẽ trở nên nhanh gọn và dễ hơn nhiều nhiều ý. Mong rằng sau bài viết này mọi người có thể áp dụng vào đâu đó trong có thể trong dự án của mình nhé

https://css-tricks.com/a-complete-guide-to-calc-in-css/ https://css-tricks.com/a-couple-of-use-cases-for-calc/