Can I separate class style by comma in build css file?

[tinpont]

Example,

sass

.class-a {
  color: red;

  .child-a, .child-b {
    color: blue;
  }
}

css

.class-a {
    color: red;
}

.class-a .child-a, .class-a .child-b {
    color: blue;
}

expect css

.class-a {
    color: red;
}

.class-a .child-a {
    color: blue;
}

.class-a .child-b {
    color: blue;
}

[nex3]

Why do you expect the style rule to be split into two?

[tinpont]

I use sass for custom css render which does not support many comma in one line. So I want split them. Can I write my custom function to handle this?

[vaza18]

I use sass In Drupal and using multiple selectors in a single line does not match Drupal coding standards: https://www.drupal.org/docs/develop/standards/css/css-formatting-guidelines#format

Example:

SASS

.selector-1 {
  display: none;
}
.selector-2 {
  .child-selector {
    @extend .selector-1;
  }
}

CSS

Current behavior (expanded output style)

.selector-1, .selector-2 .child-selector {
  display: none;
}

Expected CSS (required by Drupal coding standards)

.selector-1,
.selector-2 .child-selector {
  display: none;
}

Also if to compile CSS for HTML emails, the length of the string becomes really important.

[nex3]

@tinpont

I use sass for custom css render which does not support many comma in one line. So I want split them. Can I write my custom function to handle this?

You could write a mixin:

@mixin split-rules($selector) {
  @each $complex in selector-parse($selector) {
    #{$complex} {
      @content;
    }
  }
}

.class-a {
  color: red;

  @include split-rules(".child-a, .child-b") {
    color: blue;
  }
}

@vaza18 Sass does its best to generate nice-looking output, but if the precise output style matters a lot, I suggest post-processing it.