How to organize partial import of CSS code components in LESS?

Question

css

Hello
I thought that it's time to parse the CSS code into several thousand lines into separate components.
I am writing in BEM, I have an idea to organize it as follows:

• Block
  
• Rules for displaying on the page (grid parameters, flex / float properties, position)
  
• => Import the file containing the remaining properties of the block and the properties of its elements/modifiers
  

i.e.:
mailStyles.less

spoiler

.sliderItem{
              .col();
              .size(12);
              position: relative;
              display: none;
              opacity: 0;
              transition: all 1s linear;
              font-family: 'Arial', Regular, serif;
              @import 'sliderItem.less';
            }

sliderItem.less

spoiler

&__previewPic{
  img{

  }
}
&__social{
  position: absolute;
  top: 20px;
  right:30px;
  display: flex;
  color: @color_white_opacity_50;
}
&__dateAndCapture {
  color: @color_white;
  position: absolute;
  bottom: 50px;
  left: 10px;
  &_d, &_m, &_y{
    font-family: inherit;
    color:inherit;
    font-size: 13px;
  }
  &_capture{
    font-family: inherit;
    color:inherit;
    font-size: 18px;
    margin: 10px 0 0 0;
    line-height: 23px;
  }
 &_date{
  display: flex;
}
}

As you can see, there are mainmore styles in the file than the desired structure suggests... But you can’t just hang them in sliderItem.lesswithout a selector... The compiler is indignant...
Maybe someone will suggest some construction for the gallp task ..
Or advise another implementation of such a structure. In general ,
I'm waiting for any practical advice and thank you in advance for your participation!

Answer 1

I don't fully understand what you are trying to achieve. It seems that all of the above is done by the simplest mixin.
wrap the contents of sliderItem.less in a mixin (with parentheses required) and simply call it inside the .sliderItem block in mailStyles.less. that is, include all the tables of individual components somewhere at the top, and then mix the necessary mixins into specific blocks.