calc

  css

Definition of calc ()

Used to dynamically calculate length values
Can be used in any length, value, time, angle, frequency, etc.

Operator for calc ()

+ - * /

width:calc(50% + 15px);
 height:calc(100% - 20px);
 width:calc(15 * 4px);
 height:calc(100% / 4);

Spaces are required on both sides of the operator
When using the */operator, one value must be guaranteed to be a numeric type

Calc () uses distinction

//1. css
 width:calc(100% - 20px);
 //2. scss
 $base-font-size: 37.5px;
 @function px2rem($px) {
 @return ($px / $base-font-size) * 1rem / 2;
 }
 width:calc(100% - #{px2rem(15px)});
 //3. less
 width:calc(~"100% - 15rem");
 //4. sass
 width: calc(1rem - 2px);
 width: calc((100% - #{$a}*#{$b})/#{$c} );
 line-height: calc(1*20/14);
 //calc in SASS cannot recognize "/",that is, it cannot recognize division alone. There are two ways to solve this problem: 0+ expression or 1* expression

Calc () application example

  1. On the mobile side/PC side, there will be a screen display and the scrolling effect will be partially realized. At this time, using calc () to calculate the height of the scrolling area can perfectly adapt to all models without using js dynamic calculation.
  2. Elastic boxes are usually used for page division of equal division areas or equal ratio areas, but calc () can also solve this problem well.
  3. Element centering problem