Generated by SassMeister.com.

parent-selector-input.scss

/* --- Parent selector */
// .alert {
//     background: red;
    
//     &:hover {
//         font-weight: bold;
//     }
// }

/* Adding suffixes */
// .accordion {
//   max-width: 600px;
//   margin: 4rem auto;
//   width: 90%;
//   font-family: "Raleway", sans-serif;
//   background: #f4f4f4;

//   &__copy {
//     display: none;
//     padding: 1rem 1.5rem 2rem 1.5rem;
//     color: gray;
//     line-height: 1.6;
//     font-size: 14px;
//     font-weight: 500;

//     &--open {
//       display: block;
//     }
//   }
// }

// $parent: &;

// .background {
//     background: red;
    
//     #{$parent}:hover {
//         background: blue;
//     }
// }

// /* If the & expression is used outside any style rules, it returns null */

parent-selector-output.css

/* --- Parent selector */
/* Adding suffixes */

settings.json

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