centrage en utilisant LESS mixin

Question

Ceci est d'un débutant MOINS.

J'essaye de centrer horizontalement les choses en utilisant un mixin MOINS, mais ça ne marche pas. Est-ce ma syntaxe? D'autres paramètres LESS fonctionnent.

MOINS:

@mixin centerH { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
} 
#homepage_boxes { 
    width: 25%; 
    @include centerH; 
    top: 0; 
} 
.parent { 
    position: relative; 
} 
#screen1 { 
    .parent; 
} 

html:

<div class="screen" id="screen1"> 
    <div id="homepage_boxes" class="section group"> 
     <div class="col span_1_of_3 clickable"> 
      <div class="part_head part1">Part 1</div> 
     </div> 
     <div class="col span_1_of_3 clickable"> 
      <div class="part_head part2">Part 2</div> 
     </div> 
     <div class="col span_1_of_3 clickable part_selected"> 
      <div class="part_head part3">Part 3</div> 
     </div> 
    </div> 

Answer 1

Vous utilisez la syntaxe SASS, pas moins.

LESS mixin syntax.

Je pense que c'est ce que vous voulez:

.centerH { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
} 
#homepage_boxes { 
    width: 25%; 
    .centerH; 
    top: 0; 
} 

---

vous avez effectivement utilisé la syntaxe correcte juste en dessous dans votre exemple de code:

.parent { 
    position: relative; 
} 
#screen1 { 
    .parent; 
} 

Le style .parent se comporte comme un mixin mais cible également une classe. Si vous voulez que de ne pas travailler contre une classe et le travail que comme un mixin, vous pouvez utiliser des parenthèses pour la faire ressembler à une fonction:

.centerH() { 

qui permettrait à d'autres sélectionneurs d'utiliser .centerH comme mixin, mais ne produirait pas lui-même .centerH dans le fichier CSS résultant.