1
votes

Quelle est la différence entre l'esperluette et la double esperluette dans Less?

J'essaie d'écrire Less dans le contexte de React.

Le code suivant fonctionne:

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &&:first-child { /* notice double ampersand */
        border-left: 2px solid #007aff;
    }
}

Ce code fonctionne également:

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
    border-left: 2px solid #007aff;
}

Cependant, le code suivant ne fonctionne pas:

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &:first-child { /* notice single ampersand */
        border-left: 2px solid #007aff;
    }
}

J'ai vu la double esperluette utilisée ailleurs dans la base de code, donc && fait quelque chose. Quelqu'un pourrait-il m'expliquer la différence?

reactjs css less

3 commentaires

Êtes-vous certain que le reste de la base de code est SASS et non MOINS? stackoverflow.com/questions/19228089/double-ampersand-in-les‌ s

Navet vous avez raison, c'est probablement MOINS. Merci de le signaler et du lien. C'est sans doute pourquoi je n'ai rien trouvé sur Google.

lesscss.org/features/#parent-selectors-feature-multiple-

3 Réponses :

2
votes

La double esperluette que vous avez vue pourrait être & + & ou & ~ & , et non && , comme pour le meilleur de mes connaissance ce dernier ne fait rien dans Sass.

L'utilisation de & + & vous permettra de cibler un frère adjacent du même sélecteur, par exemple ce SCSS:

.btn {
  ...
}
.btn + .btn {
  margin-left: 15px;
  background: firebrick;
}

1 commentaires

Comme l'a souligné un autre utilisateur, j'utilise LESS et non SASS. Merci pour votre réponse. J'ai lu l'article et cela a beaucoup de sens.

1
votes

&& est redondant par rapport à l'opérateur logique de base AND dans presque tous les langages de programmation courants, tandis que le seul & est utilisé spécifiquement dans SASS pour connexion des sélecteurs CSS.

Connexion, ou pour être plus précis dans le cas d'utilisation de SASS: la concaténation de sélecteurs est très différente de la combinaison de deux conditions dans un sens logique.

Lire la suite: https://www.sitepoint.com/sass-basics-operators/ et https://javascript.info/logical-operators

1 commentaires

Comme l'a souligné un autre utilisateur, j'utilise LESS et non SASS, j'ai donc mis à jour ma question. Merci pour votre réponse.

0
votes

Cela pourrait être pour augmenter la spécificité: .thing.thing est plus élevé que juste .thing

2 commentaires

J'ai supprimé important car il n'est pas pertinent pour ce code. Merci pour votre réponse.

OK super! Si tel est le cas, je suis certain que && vise à renforcer la règle. Je l'ai utilisé moi-même, en particulier lorsque vous devez remplacer les styles tiers.