什么是 LESS
LESS 是一种 CSS 预处理器，使用 LESS 可以在 CSS 中使用变量、函数、嵌套等高级特性，从而提高样式开发的效率。
为何需要响应式图片
在移动互联网时代，用户访问网站或应用的设备不断增多，而每个设备的屏幕大小不同，要想好好展示图片，就需要使用响应式图片。
响应式图片能够根据设备屏幕大小自动适应，如在大屏幕上展示大型图片，在小屏幕上展示小型图片，从而提升用户体验和网站性能。
如何实现响应式图片
使用 CSS 的媒体查询
使用 CSS 的媒体查询可以很方便地实现响应式图片。例如，以下代码为在设备宽度小于等于 768px 时，让图片大小变为 50%：
@media screen and (max-width: 768px) {
.responsive-image {
width: 50%;
}
}但是，这种方法需要将每一个图片的 CSS 代码都写一遍，耗时耗力。
使用 LESS 的 mixin
LESS 的 mixin 可以将一些常用代码打包成函数，方便重复使用。例如，以下 mixin 定义了响应式图片的 CSS：
-- -------------------- ---- -------
------------------------- -
------ -------
------ ------ --- ----------- ------ -
------ ------ - --
-
------ ------ --- ----------- ------ -
------ ------ - --
-
-如上所示，.responsive-image 可以接受一个参数 @width，表示图片的原始宽度。在此基础上，通过媒体查询，可以在不同设备宽度时展示不同大小的图片，以实现响应式。
使用时，只需要在图片的类名中添加 .responsive-image，然后将原始宽度传入即可。例如，以下代码为将一个宽度为 800 像素的图片使用 .responsive-image mixin 转换为响应式图片：
<img src="..." class="responsive-image" style="width:800px">
总结
使用 LESS 的 mixin 能够很方便地实现响应式图片，尤其是当需要展示大量图片时，该方法可以减少代码量，提高开发效率。因此，在实际项目中，建议尽可能地使用 LESS 的 mixin 来实现响应式图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646463e0968c7c53b0541c45