Die @at-root Richtlijn in SASS

Die @at-root richtlyn is bedoel om reëls uit die ouerselektor te onttrek na die wortel van die lêer.

Kom ons kyk na die volgende voorbeeld met selektore op die eerste vlak van inkapseling:

style.scss.parent {
  background-color: #fdd;
  @at-root .child {
    border: 1px solid;
  }
}

Na kompilasie het ons die volgende kode gekry:

styles.css.parent {
  background-color: #fdd;
}
.child {
  border: 1px solid;
}

Laat ons nou kyk hoe die @at-root richtlyn werk met verskeie selektore:

style.scss.main-parent {
  background-color: #fdd;
  @at-root {
    .first-child {
      border: 1px solid;
    }
    .second-child {
      font-weight: bold;
    }  
  }
  .step-child {
    color: #232523;
  }
}

Na kompilasie lyk die kode soos volg:

styles.css.main-parent {
  background-color: #fdd; 
}

.first-child {
  border: 1px solid; 
}

.second-child {
  font-weight: bold; 
}

.main-parent .step-child {
  color: #232523; 
}

styles.scss.primary-button {
  background-color: #3272c7;
  @at-root {
    .block-button {
      color: #ff0000;
    }
    .content-button {
      color: #ccb42a;
    }
  }
  .warning-button {
    border: 2px solid #232523;
  }
}