How do you create multiple box-shadow values in LESS CSS

Creating multiple box-shadow values in LESS CSS enables applying multiple shadow effects to a single element, thereby enhancing visual hierarchy and adding detail.

Here is a specific example to illustrate how to do this:

First, we define a mixin to accommodate multiple shadow values. Commas separate different shadow values to achieve multiple shadow effects. The following is an example of a mixin defining multiple shadows:

less
.box-shadow(@value) {
  box-shadow: @value;
}

.multi-shadow() {
  .box-shadow(
    0px 1px 3px rgba(0,0,0,0.12),
    0px 1px 2px rgba(0,0,0,0.24)
  );
}

In the .multi-shadow() mixin above, we set two shadows. The first shadow is lighter and wider, primarily used to create a subtle sense of depth. The second shadow is darker and more concentrated, enhancing the perception of depth.

Then, we can use this mixin in any class as needed:

less
.my-box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  .multi-shadow();
}

In this example, the .my-box class applies the defined .multi-shadow() mixin, resulting in a double-shadow effect on the box. This approach is highly suitable for scenarios where you want to emphasize elements or enhance the visual hierarchy of page elements.

By using this method, we can flexibly add multiple shadow effects to elements without writing repetitive CSS code, making the code cleaner and more maintainable.