2012-07-04 5 views
1

저는 현재 부족한 CSS에서 그라디언트의 단일 정의 지점을 만들려고합니다. 나에게 크로스 브라우저 CSS 코드를 작성하는 함수를 만들었지 만 해결할 수없는 한 가지 문제가 있습니다.LESS CSS 가상 클래스가 셀렉터의 속성을 함수에 전달할 수 있습니까?

그라디언트를 한 번 지정하고 별도의 함수 (인수 "flip"를 수신하는)를 사용하여 두 색상 변수를 마우스로 스왑합니다. 아래에 예를 게시했습니다.

selector { .background-gradient(rgba(27, 117, 185, .35), 48%, rgba(22, 97, 154, .35), 52%); } 
    selector:hover { .background-gradient(flip); } 

저는 해결책을 찾고 있었지만 물론 아무것도 발견하지 못했습니다. 요약하면 다음과 같습니다. 선택기의 그래디언트 값을 읽고 색상을 바꾸어 호버 스타일을 만드는 함수를 사용하고 싶습니다. 나는 그것이 가능할 것을 희망한다.

미리 감사드립니다.

추 신 : "뒤집기"(패턴 일치)를 듣는 기능을 만드는 것은 문제가 아니지만 실제로 얻으려는 내용을 더 잘 이해할 수 있다고 생각했습니다.

답변

1

그것의 100 % 분명 당신이 원하는,하지만 왜이

.selector { 
    @startCol: rgba(27, 117, 185, .35); 
    @startPercentage: 48%; 
    @endCol: rgba(22, 97, 154, .35) 
    @endPercentage: 52%; 
    .gradient(@startCol, @startPercentage, @endCol, @endPercentage); 
    &:hover { 
    .gradient(@endCol, @endPercentage, @startCol, @startPercentage); 
    } 
} 

같은이없는 경우는 어떻게 그 당신이 (가) 믹스 인 이상 만들 수있는 호버에 플립하는 것이 일반적 다음은 전화를 할 것입니다 클래스/그라데이션 정의마다 한 번.

믹스 인이 이전에 함수에 전달 된 인수를 알거나 값 배열로 믹스 인을 호출 할 수있는 방법이 없습니다.

+0

이것은 정확히 내가 필요한 것입니다. 그라디언트 mixin에 정상 상태 및 마우스 오버 상태를 추가하는 방법에 대해서는 생각해 본 적이 없습니다. 고마워요! –

관련 문제