The frontend product page gallery is broken now, unable to compile the Less file lib/web/mage/gallery/gallery.less: variable @modal-slide-header__padding-vertical is undefined (and my fix)

The request for pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.css leads to the failure:

Compilation from source: 
frontend/Magento/luma/en_US/mage/gallery/gallery.less
variable @modal-slide-header__padding-vertical is undefined in file var/view_preprocessed/css/frontend/Magento/luma/en_US/css/source/_theme.less in _theme.less on line 254, column 37
252| //  Modal popup
253| @modal-action-close__font-size: @font-size__base;
254| @modal-slide-action-close__padding: @modal-slide-header__padding-vertical @modal-popup__padding;
255| 
256| //  Checkout tooltip icon
257| @checkout-tooltip-icon__font-size: 21px;
#0 lib\internal\Magento\Framework\View\Asset\PreProcessor\AlternativeSource.php(155): Magento\Framework\Css\PreProcessor\Adapter\Less\Processor->processContent(Object(Magento\Framework\View\Asset\File))
#1 lib\internal\Magento\Framework\View\Asset\PreProcessor\AlternativeSource.php(115): Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent('mage/gallery/ga...', '', '', Object(Magento\Framework\View\Asset\File\FallbackContext))
#2 app\code\Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy.php(62): Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process(Object(Magento\Framework\View\Asset\PreProcessor\Chain))
#3 lib\internal\Magento\Framework\View\Asset\PreProcessor\Pool.php(74): Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process(Object(Magento\Framework\View\Asset\PreProcessor\Chain))
#4 lib\internal\Magento\Framework\View\Asset\Source.php(128): Magento\Framework\View\Asset\PreProcessor\Pool->process(Object(Magento\Framework\View\Asset\PreProcessor\Chain))
#5 lib\internal\Magento\Framework\View\Asset\Source.php(86): Magento\Framework\View\Asset\Source->preProcess(Object(Magento\Framework\View\Asset\File))
#6 lib\internal\Magento\Framework\View\Asset\File.php(150): Magento\Framework\View\Asset\Source->getFile(Object(Magento\Framework\View\Asset\File))
#7 lib\internal\Magento\Framework\App\StaticResource.php(108): Magento\Framework\View\Asset\File->getSourceFile()
#8 lib\internal\Magento\Framework\App\Bootstrap.php(258): Magento\Framework\App\StaticResource->launch()
#9 pub\static.php(13): Magento\Framework\App\Bootstrap->run(Object(Magento\Framework\App\StaticResource))
#10 {main}

The comlilation is failed on the following line:

My fix

Locate the line:

Add the new line just after:

@import '../../css/source/components/_modals.less';

A similar problem:

The better solution is “My universal fix for all the «variable @modal-slide-header__padding-vertical is undefined» problems

It does work, just make sure you purge your var/view_preprocessed/ dir so the command can overwrite it.

The PHP interpreter should have the write rights to the var folder contents anyway: it is just a requirement for the proper Magento2 installation: http://devdocs.magento.com/guides/v2.0/install-gde/install/file-system-perms.html