web-dev-qa-db-fra.com

Nid du Sass n-enfant

Je refactorise ces sélecteurs CSS vers Sass:

#romtest .detailed th:nth-child(2),
#romtest .detailed th:nth-child(4),
#romtest .detailed th:nth-child(6),
#romtest .detailed td:nth-child(2),
#romtest .detailed td:nth-child(3),
#romtest .detailed td:nth-child(6),
#romtest .detailed td:nth-child(7),
#romtest .detailed td.last:nth-child(2),
#romtest .detailed td.last:nth-child(4) {
  background:#e5e5e5;
}

... et est venu avec ceci:

#romtest .detailed {
    th:nth-child {
        &(2), &(4), &(6) {
            background:#e5e5e5;
        }
    }
    td:nth-child {
        &(2), &(3), &(6), &(7) {
            background:#e5e5e5;
        }
    }
    td.last:nth-child {
        &(2), &(4) {
            background:#e5e5e5;         
        }
    }
}

Malheureusement, cela génère une erreur:

CSSS non valide après "&": "{" attendu, était "(2), & (4), & (6) {"

Je sais aussi que cela pourrait être mieux parce que je suis:

  • répétition de la couleur d'arrière-plan
  • nombres répétitifs - c'est-à-dire (2) et (6)

Comment dois-je refactoriser ces sélecteurs?

csssass
16
Ryan

Je ferais attention d'essayer de devenir trop intelligent ici. Je pense que c'est déroutant tel quel et en utilisant une technologie plus avancée nth-child les paramètres ne feront que compliquer les choses. Quant à la couleur d'arrière-plan, je viens de définir cela sur une variable.

Voilà ce que j'ai imaginé avant de réaliser qu'être trop intelligent pourrait être une mauvaise chose.

#romtest {
 $bg: #e5e5e5;
 .detailed {
    th {
      &:nth-child(-2n+6) {
        background-color: $bg;
      }
    }
    td {
      &:nth-child(3n), &:nth-child(2), &:nth-child(7) {
        background-color: $bg;
      }
      &.last {
        &:nth-child(-2n+4){
          background-color: $bg;
        }
      }
    }
  }
}

et voici une démo rapide: http://codepen.io/anon/pen/BEImD

---- MODIFIER ----

Voici une autre approche pour éviter de retaper background-color:

#romtest {
  %highlight {
    background-color: #e5e5e5; 
  }
  .detailed {
    th {
      &:nth-child(-2n+6) {
        @extend %highlight;
      }
    }

    td {
      &:nth-child(3n), &:nth-child(2), &:nth-child(7) {
        @extend %highlight;
      }
      &.last {
        &:nth-child(-2n+4){
          @extend %highlight;
        }
      }
    }
  }
}
29
Bill Criswell

Vous essayez de faire &(2), &(4) qui ne fonctionnera pas

#romtest {
  .detailed {
    th {
      &:nth-child(2) {//your styles here}
      &:nth-child(4) {//your styles here}
      &:nth-child(6) {//your styles here}
      }
  }
}
2
Vinay Raghu