Q:

What is the meaning of margin-left: max(40px); and how does this works?

In a video tutorial of SASS, Gary wrote a line of CSS as: 
 margin-left: max(40px);

I want to understand what does this line mean and how does it work?
Also, it is working fine for his system but it isn't working in my browser. What could be the reason?

Link to Gary's source code.

A:

max() is a function in CSS that is part of CSS Values and Units Module Level 4.
It lets you define a list of values, from which the maximum is used:
margin-left: max(40px, 60px, 80px);

The result is:
margin-left: 80px;

It's also possible to use expressions without calc inside:

Note: Full math expressions are allowed in each of the arguments; there’s no need to nest a calc() inside! You can also provide more than two arguments, if you have multiple constraints to apply.

margin-left: max(10 * (1vw + 1vh) / 2, 12px);

Unfortunately the browser support for max() and also min() or clamp() is not that broad, and this code snippet will work in Safari and Chrome only at the moment:

div {
  width: 10px;
  height: 10px;
  background: red;
  margin-left: max(40px, 200px); 
}
<div></div>

As you came across this in a SASS context, it's also worth noticing that there's a max()function in SASS as well. And it's older than the native one:

CSS added support for min() and max() functions in Values and Units Level 4, from where they were quickly adopted by Safari to support the iPhoneX. But Sass supported its own min() and max() functions long before this, and it needed to be backwards-compatible with all those existing stylesheets. This led for the need for extra-special syntactic cleverness.

