28172 sujets

CSS et mise en forme, CSS3

[Résolu] SASS directive @if, point manquant.

Bonjour,
J'ai mis une directive sur une règle CSS en SASS, mais ça ne donne pas exactement ce que je voudrais....
Il y a peut-être quelque chose que je ne fait pas correctement?

Voici mon code:

$cams: link-4g, link-4gv, mms, geopad;
@mixin features-margin {
	.#{$cams} & {
		@if $cams {
			&:nth-child(5n+5) {
				margin-right: 0;
			}
			&:nth-child(4n+4) {
				margin-right: 50px;
			}
		}
	}
}
ul {
	&#icon {
		li {
			@include features-margin;
		}
	}
}

mais ça me donne ça:

ul#icon li .link-4g:nth-child(5n+5), ul#icon li link-4gv:nth-child(5n+5), ul#icon li mms:nth-child(5n+5), geopad ul#icon li:nth-child(5n+5) {
      margin-right: 0; }
    ul#icon li .link-4g:nth-child(4n+4), ul#icon li link-4gv:nth-child(4n+4), ul#icon li mms:nth-child(4n+4), geopad ul#icon li:nth-child(4n+4) {
      margin-right: 50px; }

le point est présent pour le premier résultat, mais pas pour les 3 autres...

Il doit bien y avoir une façon?
Modifié par juliesunset (08 Feb 2016 - 17:16)
Modérateur
Bonjour bonjour,

Je n'ai pas très bien compris le but du if ni les #{cams} cash comme ça (je crois que du coup il colle les valeurs à la suite sans vraiment "boucler" pour prendre le point).

J'ai tenté de fixé ton code mais j'ai pas réussi donc je suis parti de 0 en utilisant le each de SASS :

$cams: link-4g, link-4gv, mms, geopad;

@mixin features-margin {
  @each $cam in $cams {
    	.#{$cam} {
    		&:nth-child(5n+5) {
    			margin-right: 0;
    		}
    		&:nth-child(4n+4) {
    			margin-right: 50px;
    		}
    	}
  }
}

ul {
	&#icon {
		li {
			@include features-margin;
		}
	}
}


ce qui me sort le CSS mais pas en ligne avec un seul param:

ul#icon li .link-4g:nth-child(5n+5) {
  margin-right: 0;
}

ul#icon li .link-4g:nth-child(4n+4) {
  margin-right: 50px;
}

ul#icon li .link-4gv:nth-child(5n+5) {
  margin-right: 0;
}

ul#icon li .link-4gv:nth-child(4n+4) {
  margin-right: 50px;
}

ul#icon li .mms:nth-child(5n+5) {
  margin-right: 0;
}

ul#icon li .mms:nth-child(4n+4) {
  margin-right: 50px;
}

ul#icon li .geopad:nth-child(5n+5) {
  margin-right: 0;
}

ul#icon li .geopad:nth-child(4n+4) {
  margin-right: 50px;
}


Il te le fallait en une seule ligne ?
Salut!
Merci pour ta réponse.

En fait oui c'est ce que j'essayais de faire, les mettre tous sur une même ligne.

Et là après coup je me rend compte d'une erreur... j'essaie aussi d'aller chercher les parents, donc le résultat rechercher devrait plutôt être

.link-4g ul#icon li:nth-child(5n+5), .link-4gv ul#icon li:nth-child(5n+5), .mms ul#icon li:nth-child(5n+5), .geopad ul#icon li:nth-child(5n+5) {
      margin-right: 0; }
    .link-4g ul#icon li:nth-child(4n+4), .link-4gv ul#icon li:nth-child(4n+4), .mms ul#icon li:nth-child(4n+4), .geopad ul#icon li:nth-child(4n+4) {
      margin-right: 50px; }
Modérateur
Re,

Alors du coup je viens de penser à un truc tout con avec ta réponse.... J'étais resté sur les fonctions suite à ton premier post mais on peux carrément s'en passer...

.link-4g,
.link-4gv,
.mms,
.geopad {
  		& ul#icon li:nth-child(5n+5) {
  			margin-right: 0;
  		}
  		& ul#icon li:nth-child(4n+4) {
  			margin-right: 50px;
  		}
}


Resultat :

.link-4g ul#icon li:nth-child(5n+5),
.link-4gv ul#icon li:nth-child(5n+5),
.mms ul#icon li:nth-child(5n+5),
.geopad ul#icon li:nth-child(5n+5) {
  margin-right: 0;
}

.link-4g ul#icon li:nth-child(4n+4),
.link-4gv ul#icon li:nth-child(4n+4),
.mms ul#icon li:nth-child(4n+4),
.geopad ul#icon li:nth-child(4n+4) {
  margin-right: 50px;
}
Modérateur
Mmmmmh quand tu dis :
juliesunset a écrit :
la variable appelé pourrait changé au fil du temps....

De quelle variable tu parles ? En fait j'ai du mal à voir jusqu’où tu veux essayer te "simplifier" la vie en compliquant le code et je me demande si c'est pas de l'overkill Smiley ravi
Modérateur
Oui oui mais du coup quitte a rajouter un élément dans ta liste, ca reviens pas au même de rajouter un élément directement ici ?
.link-4g,
.link-4gv,
.mms,
.geopad {
  		& ul#icon li:nth-child(5n+5) {
  			margin-right: 0;
  		}
  		& ul#icon li:nth-child(4n+4) {
  			margin-right: 50px;
  		}
}


Sinon je pense qu'il va falloir passer par la solution de ma première réponse (je vois pas d'autres solutions) quitte a avoir le CSS généré en plusieurs fois mais normalement on s'en fout un peu vu que c'est le généré... il y a juste le surplus de caractère mais bon pour le poids que ça fait... et normalement niveau vitesse d'interprétation c'est là même chose qu'avec des virgules. Smiley ohwell j'ai pas mieux dans mon sac sorry
Modérateur
Hahaha ah bah si en fait. Le test de la dernière chance qui marche :

$list : '.link-4g', '.link-4gv', '.mms', '.geopad';

#{$list} {
  		& ul#icon li:nth-child(5n+5) {
  			margin-right: 0;
  		}
  		& ul#icon li:nth-child(4n+4) {
  			margin-right: 50px;
  		}
}


Smiley krull
Effectivement c'est plus simple!

mais euh... il manque toujours les points!
.#{$cams} {
	& ul#icon li:nth-child(5n+5) {
  	margin-right: 0;
	}
	& ul#icon li:nth-child(4n+4) {
  	margin-right: 50px;
  }
}

voici ce que ça me donne:
.link-4g ul#icon li:nth-child(5n+5), link-4gv ul#icon li:nth-child(5n+5), mms ul#icon li:nth-child(5n+5), geopad ul#icon li:nth-child(5n+5) {
  margin-right: 0; }

.link-4g ul#icon li:nth-child(4n+4), link-4gv ul#icon li:nth-child(4n+4), mms ul#icon li:nth-child(4n+4), geopad ul#icon li:nth-child(4n+4) {
  margin-right: 50px; }
Modérateur
No no, dans mon dernier post il faut mettre les points dans la variable directement (avec les quotes sinon ca fait une erreur) :
$list : '.link-4g', '.link-4gv', '.mms', '.geopad';

et après l'appeler sans le point devant :
#{$list} {
Sujet clos
Aller à