html - Why is Sass not compiling my classes correctly?

Question

I'm creating a web and use Sass mainly for variables with colors. However, when I nested my color classes in SCSS, it compiled into CSS with whitespaces and thus, it doesn't work. Is it some sort of formatting issue, or something else? I'm also inserting my code for better understanding.

<h1 class="lightblue">Hello World!</h1><h2>Hello World!</h2><h3>Hello World!</h3><h4 class="orange">Hello World!</h4><h5 class="darkgreen">Hello World!</h5><h6>Hello World!</h6>

My SCSS:

h1, h2, h3, h4, h5, h6 {
    .orange {
        &color: $orange;
    }
    
    .darkgreen {
        &color: $dark-green;
    }

    .lightgreen {
        &color: $light-green;
    }

    .red {
        &color: $red;
    }

    .blue {
        &color: $blue;
    }

    .lightblue {
        &color: $light-blue;
    }
}

My compiled, but non-functional CSS:

h1 .orange, h2 .orange, h3 .orange, h4 .orange, h5 .orange, h6 .orange {
      color: #F27F1B;
    }
    h1 .darkgreen, h2 .darkgreen, h3 .darkgreen, h4 .darkgreen, h5 .darkgreen, h6 .darkgreen {
      color: #49BF72;
    }
    h1 .lightgreen, h2 .lightgreen, h3 .lightgreen, h4 .lightgreen, h5 .lightgreen, h6 .lightgreen {
      color: #81D959;
    }
    h1 .red, h2 .red, h3 .red, h4 .red, h5 .red, h6 .red {
      color: #F23C50;
    }
    h1 .blue, h2 .blue, h3 .blue, h4 .blue, h5 .blue, h6 .blue {
      color: #009ECE;
    }
    h1 .lightblue, h2 .lightblue, h3 .lightblue, h4 .lightblue, h5 .lightblue, h6 .lightblue {
      color: #04ADBF;
    }

`

question from:https://stackoverflow.com/questions/65643165/why-is-sass-not-compiling-my-classes-correctly

Answer 1

remove the & from the CSS property:

.orange {
    &color: $orange;
}

the & is used in Sass/Scss to concatenate the parent class, not the CSS property.

h1, h2, h3, h4, h5, h6 {
    &.orange {
        color: $orange;
    }
...    
}

I highly suggest you not to nest those classes under the headings (h1,h2,h3...) What would happen if you need those classes in a paragraph or a span in the future? You would need to create copies of these classes over and over again.

I would choose an approach like bootstrap, creating simple helper classes, and using them when you need them (on every element):

.color-white {
  color: #FFFFFF;
}

You could also create all those classes from a loop, without having to have to create them manually:

$color-collection: ('white' '#FFFFFF'), ('black' '#000000');
@each $color in $color-collection {
  $color-name: nth($color, 1);
  $color-value: nth($color, 2);
  .color-#{$color-name} {
    color: #{$color-value};
  }
}

Would generate this CSS:

.color-white {
  color: #FFFFFF;
}

.color-black {
  color: #000000;
}