LESS mixinを使用したセンタリング

Question

これは初心者の方からのものです。

私は、LESSミックスインを使用して水平方向に集中しようとしていますが、機能しません。それは私の構文ですか？他の低設定が機能しています。

LESS：

@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

あなたがLESS、SASSの構文を使用していません。

LESS mixin syntax。

私は、これはあなたが欲しいものだと思う：.parentスタイリングはミックスインのように振る舞う

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

しかし：あなたが実際にあなたのサンプルコードでは、右下の正しい構文を使用

.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; 
} 

---

また、クラスをターゲットにしています。 あなたがするが、ミックスインとしてクラスとだけ仕事に対して動作しないことを望んでいた場合、あなたはそれが関数のように見えるように括弧を使用することができます。他のセレクタはミックスインとして.centerHを使用することができるようになる

.centerH() { 

、結果のCSSファイルに.centerHを出力しません。