Question

En général, j'utilise Modernizr pour connaître les capacités du navigateur. Même temps, j'utiliser MOINS CSS pour rendre mon plus lisible et css maintenable. style commun en utilisant moins de règles imbriquées ressemble à ceci:

#header {
  color: black;

  .logo {
    width: 300px;
    color: rgba(255,255,255,.6);
    &:hover { text-decoration: none }
  }
}

Alors, si j'utilise l'automne-back de style Modernizr, j'ajouter ce texte pour le bloc précédent:

.no-js #header,
.no-rgba #header {
  .logo {
    color: white;
  }
}

, il semble donc que j'ai deux branches de code, et chaque fois que je dois vérifier un autre aspect de la compatibilité du nombre de Braches va croître. Ce code est moins maintenable, parce que vous devez trouver tous les styles appliqués à chaque élément, et les avantages que nous en utilisant des classes imbriquées se disparait.

La question: est-il possible dans la syntaxe MOINS d'inclure ces automne-dos, et non le démarrage d'une nouvelle branche de code pour .no-js et d'autres classes .no-SMTH

?
Était-ce utile?

La solution

Vous pouvez maintenant utiliser l'opérateur & pour résoudre ce problème. La syntaxe suivante doit travailler dans less.js , lessphp et dotless :

b {
  a & {
    color: red;
  }
}

Ceci est compilé dans:

a b { color:red; }

Ainsi, pour l'exemple donné vous pouvez utiliser la syntaxe suivante:

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

... qui serait compilé dans:

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

Autres conseils

La meilleure façon que je peux penser à approcher est d'avoir juste un fichier .Moins séparé pour ces solutions de repli. Je pense que cela finirait beaucoup plus facile à gérer si vous n'avez pas à coups de bec autour de .no-rgba dans beaucoup d'endroits.

.no-rgba {
  #header {}
  #footer {}
}

.no-js {
  #header {}
  #footer {}
}

J'ai essayé de venir avec une solution comment vous vouliez mais je pas eu de chance.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top