Flying

%subsclasses-color {
  .sub1, .sub2, .sub3 {
    color:red;
  }
}
.main1 {
  @extends %subclasses-color;
}
.another-main {
  @extends %subclasses-color;
}

/**
 * Основной интерфейс для всех фигур которые можно хранить в Box'е
 */
interface IFigure
{

}

/**
 * Интерфейс для фигур которые могут обладать площадью
 */
interface IArea extends IFigure
{
    public function getArea(): float;
}

/**
 * Интерфейс для фигур которые могут обладать цветом заливки
 */
interface IFillColor
{
    public function setFillColor(string $color): self;

    public function getFillColor(): string;
}

/**
 * Обобщённый интерфейс для фигур, обладающих и цветом и площадью
 * По факту, думаю, он не имеет смысла, но нужен по условию задачи
 */
interface IShape extends IArea, IFillColor
{

}

/**
 * Коробка для хранения фигур
 */
class Box
{
    /**
     * @var IFigure[]
     */
    private $figures = [];

    /**
     * @param IFigure[] $figures
     */
    public function __construct(array $figures = [])
    {
        // Добавляем полученные через конструктор фигуры в объект
        // Используем addFigure() чтобы проконтролировать корректность типов
        array_walk($figures, [$this, 'addFigure']);
    }

    /**
     * @param IFigure $figure
     * @return $this
     */
    public function addFigure(IFigure $figure): self
    {
        $this->figures[] = $figure;
        return $this;
    }

    /**
     * @param IFigure $figure
     * @return bool
     */
    public function hasFigure(IFigure $figure): bool
    {
        return in_array($figure, $this->figures, true);
    }

    /**
     * @param IFigure $figure
     * @return $this
     */
    public function removeFigure(IFigure $figure): self
    {
        $this->figures = array_filter($this->figures, static function (IFigure $f) use ($figure) {
            return $f !== $figure;
        });
        return $this;
    }

    /**
     * @return IFigure[]
     */
    public function getFigures(): array
    {
        return $this->figures;
    }
}

/**
 * Интерфейс для калькуляторов фигур в Box'ах
 */
interface IFigureCalculator
{
    /**
     * @param Box $box
     * @param mixed ...$args
     * @return mixed
     */
    public function calculate(Box $box, ...$args);
}

/**
 * Пример калькулятора
 */
class AreaCalculator implements IFigureCalculator
{
    public function calculate(Box $box, ...$args): float
    {
        // Получаем список фигур которые обладают площадью
        $figures = array_filter($box->getFigures(), static function (IFigure $figure) {
            return $figure instanceof IArea;
        });
        // Получаем цвет из дополнительных аргументов калькулятора
        $color = array_shift($args);
        if ($color) {
            // У нас задан цвет, фильтруем фигуры по цвету
            $figures = array_filter($figures, static function (IFigure $figure) use ($color) {
                return $figure instanceof IFillColor && $figure->getFillColor() === $color;
            });
        }
        // Подсчитываем суммарную площадь
        return array_reduce($figures, static function (float $area, IArea $figure) {
            return $area + $figure->getArea();
        }, 0);
    }
}

public function calculate(IFigureCalculator $calculator, ...$args)

@include button-variant($active-background: white, $active-border: lightgrey);

background-image: url(<картинка с точками, можно как data url>);
background-position: top left; 
background-repeat: repeat-y; 
padding-left: <размер фона по Y + отступ до контента>;

position: relative; 
&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0 - <размер отступа>;
  transform: translate(50%, 50%);
  border: <размер белого пространства сверху / снизу> solid #fff;
  <и здесь либо рисуем элемент через width, height, background-color, border-radius либо картинками, думаю что второе предпочтительнее> 
}