Generated by SassMeister.com.

input.scss

// test for compiled css order
// mixin experiment

%text-links-ph {
    &:link {
        color: yellow;
    }
    
    &:visited {
        color: yellow;
    }
    
    &:hover {
        color: yellow;
        border: 1px dashed yellow;
    }
    
    &:focus,
    &:focus-visible {
        outline: 1px solid yellow;
    }
    
    &:active {
        color: red;
    }
}

@mixin text-links ($color: green) {
    &:link {
        color: $color;
    }
    
    &:visited {
        color: $color;
    }
    
    &:hover {
        color: $color;
        border: 1px dashed $color;
    }
    
    &:focus,
    &:focus-visible {
        outline: 1px solid $color;
    }
    
    &:active {
        color: red;
    }
}

.junk-class1 {
    background-color: purple;
    color: white;
    padding: 1138em;
    margin: 1701em;
    
    a {
        @extend %text-links-ph;
    }
}

.junk-class2 {
    background-color: purple;
    color: white;
    padding: 1138em;
    margin: 1701em;
}

.junk-class3 {
    background-color: purple;
    color: white;
    padding: 1138em;
    margin: 1701em;
    
    a {
        @include text-links;
    }
}

.junk-class4 {
    background-color: purple;
    color: white;
    padding: 1138em;
    margin: 1701em;

    a {
        @extend %text-links-ph;
    }
}

.junk-class5 {
    background-color: purple;
    color: white;
    padding: 1138em;
    margin: 1701em;
    
    a {
        @include text-links;
    }
}

.section-custom {
    // default
    a {
        @include text-links(blue);
    }
    
    .subsection {
        a {
            @include text-links(pink);
        }
    }
}

%text-links-ph {
    &:link {
        color: yellow;
    }
    
    &:visited {
        color: yellow;
    }
    
    &:hover {
        color: yellow;
        border: 1px dashed yellow;
    }
    
    &:focus,
    &:focus-visible {
        outline: 1px solid yellow;
    }
    
    &:active {
        color: red;
    }
}

output.css

.junk-class4 a:link, .junk-class1 a:link {
  color: yellow;
}
.junk-class4 a:visited, .junk-class1 a:visited {
  color: yellow;
}
.junk-class4 a:hover, .junk-class1 a:hover {
  color: yellow;
  border: 1px dashed yellow;
}
.junk-class4 a:focus, .junk-class1 a:focus, .junk-class4 a:focus-visible, .junk-class1 a:focus-visible {
  outline: 1px solid yellow;
}
.junk-class4 a:active, .junk-class1 a:active {
  color: red;
}

.junk-class1 {
  background-color: purple;
  color: white;
  padding: 1138em;
  margin: 1701em;
}
.junk-class2 {
  background-color: purple;
  color: white;
  padding: 1138em;
  margin: 1701em;
}

.junk-class3 {
  background-color: purple;
  color: white;
  padding: 1138em;
  margin: 1701em;
}
.junk-class3 a:link {
  color: green;
}
.junk-class3 a:visited {
  color: green;
}
.junk-class3 a:hover {
  color: green;
  border: 1px dashed green;
}
.junk-class3 a:focus, .junk-class3 a:focus-visible {
  outline: 1px solid green;
}
.junk-class3 a:active {
  color: red;
}

.junk-class4 {
  background-color: purple;
  color: white;
  padding: 1138em;
  margin: 1701em;
}
.junk-class5 {
  background-color: purple;
  color: white;
  padding: 1138em;
  margin: 1701em;
}
.junk-class5 a:link {
  color: green;
}
.junk-class5 a:visited {
  color: green;
}
.junk-class5 a:hover {
  color: green;
  border: 1px dashed green;
}
.junk-class5 a:focus, .junk-class5 a:focus-visible {
  outline: 1px solid green;
}
.junk-class5 a:active {
  color: red;
}

.section-custom a:link {
  color: blue;
}
.section-custom a:visited {
  color: blue;
}
.section-custom a:hover {
  color: blue;
  border: 1px dashed blue;
}
.section-custom a:focus, .section-custom a:focus-visible {
  outline: 1px solid blue;
}
.section-custom a:active {
  color: red;
}
.section-custom .subsection a:link {
  color: pink;
}
.section-custom .subsection a:visited {
  color: pink;
}
.section-custom .subsection a:hover {
  color: pink;
  border: 1px dashed pink;
}
.section-custom .subsection a:focus, .section-custom .subsection a:focus-visible {
  outline: 1px solid pink;
}
.section-custom .subsection a:active {
  color: red;
}

.junk-class1 a:link, .junk-class4 a:link {
  color: yellow;
}
.junk-class1 a:visited, .junk-class4 a:visited {
  color: yellow;
}
.junk-class1 a:hover, .junk-class4 a:hover {
  color: yellow;
  border: 1px dashed yellow;
}
.junk-class1 a:focus, .junk-class4 a:focus, .junk-class1 a:focus-visible, .junk-class4 a:focus-visible {
  outline: 1px solid yellow;
}
.junk-class1 a:active, .junk-class4 a:active {
  color: red;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}