I had a closer look at this approach, and it does allow the use of ACF values in the style sheet and the proper use of CSS structure, so I’ve used it to replace my inline styles solution.
Having access to media queries makes it easy to implement responsive images for the background property. Simply set the image sizes (small, medium, large) as SASS variables and follow the instructions here:
However, the solution change required ditching my ACF repeater + ID solution for controlling the banner UX because the repeater loop overwrote the SASS variables and caused styling conflicts.
The inline styles approach had one significant advantage: it printed out the style for each loop/banner, and the styles did not interfere with each other.
The SASS variable names must be unique for each loop/banner, so I created separate ACF groups and Templates (Banner 1, Banner 2, Banner 3 etc.) to get everything working reliably. The code quality is much better, but I still have a maintenance issue. 
Maybe there is a way to manage SASS variables using ACF and L&L, so they don’t have to be explicitly stated for each instance of the loop/banner. Returning to the ACF repeater with ID solution would be nice, as that worked great, and I would have used it a lot. 