2012-10-17 4 views
2

앱의 스타일에 LESS 프레임 워크를 사용하기 시작했습니다. 나는 종종 동일한 스타일이되도록 요소에 대한 의사 클래스를 표준화해야하는 앱의 위치를 ​​종종 가지고 있습니다. 내가 너무 좋아하는 사이비 - 클래스를 추가 할 LESS의 중첩 스타일을 사용하고 오히려덜 복잡한 믹스에서 CSS psuedo-class의 배열을 사용할 수 있습니까?

button:hover, button:active, button:hover:active { /*styles here */ }

을 입력보다

: 완벽하게 잘 작동하고 추가로 버튼 클래스를 출력

.button { 
{ 
    &, 
    &:hover, 
    &:active, 
    &:hover:active { 
      border: 2px solid #000000 
    } 
} 

psuedo-classes.

내 질문은 이것입니다. 믹스 인에 의사 호출을 추가하여 믹스 인을 호출하려면이 단계를 한 단계 더 수행 할 수 있습니까? 나는 이것이 over-engineering처럼 보일지 모르지만 여러 스타일 시트에서이 코드를 재사용하고 있습니다. 코드 라인을 하나의 코드로 재사용 할 수 있다면 좋을 것입니다.

답변

2

기능 믹스를 사용할 수 있습니다 :

.button(@_arg) { 
    &, 
    &:hover, 
    &:active, 
    &:hover:active { 
      border: @_arg; 
    } 
} 

다음 방법으로 다음을 사용 :

.example { 
    .button(2px solid #000); 
} 
+0

예! 그것은 아름답게 작동했습니다. Marat에게 감사드립니다. –