덜 혼합기를 사용하여 센터링

Question

이것은 초보자에게서 온 것입니다.

난 덜 믹스를 사용하여 물건을 수평으로 배치하려고하는데, 작동하지 않습니다. 그것은 내 구문인가? 다른 덜 설정이 작동 중입니다.

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.

나는 이것이 당신이 원하는 생각 :

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

---

당신은 실제로 샘플 코드 바로 아래에 올바른 구문을 사용 :

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

.parent 스타일은 믹스 인처럼 동작하지만, 또한 클래스를 대상으로합니다. 다른 선택기는 믹스 인으로 .centerH를 사용할 수 있도록 할

.centerH() { 

을 : 당신은 믹스 인으로 클래스 만 작업에 대해 작동하지에, 당신은 그것을 함수처럼 보이게하기 위해 괄호를 사용할 수있는 싶다면 그 결과 CSS 파일에 .centerH 자체를 출력하지는 않습니다.