Less.css 클래스 간 상대 링크

Question

개인용으로 사용할 수있는 일종의 CSS 프레임 워크를 작성 중이며 문제가 발생했습니다. 경험이 많은 CSS 작성자라면 LESS.CSS에 익숙하다고 확신합니다. 그래서 ...

나는 내 자신의 컬러 팔레트과 같이 LESS 변수에 저장되어 있습니다

@color-red: #...; 
    @color-green: #...; 
    @color-blue: #...; 

그리고 특정 클래스에 각 색상 지정 : 나는 클래스가 다음

.bg-red { background: @color-red; } 
    .bg-green { background: @color-green; } 
    .bg-blue { background: @color-blue; } 

을 block 전화 :

.block { 
     display: block; 
     float: left; 
     padding: 10px; 
     margin: 10px; 
    } 

.block:hover 일의 목적은 것 현재 block 요소의 배경을 변경하고 그것을 증가 시키려면 - # 222라고합시다. 일반적으로이 같이 보일 것입니다 :

.block:hover { 
     background: @background + #222; 
    } 

내 유일한 문제는 우리가 <div class="block bg-blue">로 된 div를 만들 수 있기 때문에 bg-... 부분은 색상 팔레트에서 아무것도 할 수있는 곳 우리의 @background 여기에 무엇인지 알고하지 않는 것이있다 .

그래서 현재 배경을 타겟팅하기 위해 상대 이름 지정이 필요하다고 생각합니다. 이 문제를 해결하도록 도와 주시겠습니까?

PS : 당신은 그냥이 PHP라면 상상 우리는 CSS에서이 일을하고, 제대로 설명하지 않았다고 생각하면/LESS :

내 연구에서

$background += 222; 

Answer 1

일단 LESS가 컴파일되면 실제로 색을 "읽을"수 없습니다. 그러나 색상을 제어하는 ​​것은 호버 대신 .block 대신 색상 클래스를 사용할 수 있습니다. LESS 만든다 쉬운이 :

이 CSS를 얻을 수

@color-red: #c00; 
@color-green: #0c0; 
@color-blue: #00c; 

.makeHover(@color) { 
    background: @color + #222; 
} 

.bg-red { 
    background: @color-red; 
    &:hover {.makeHover(@color-red)} 
} 
.bg-green { 
    background: @color-green; 
    &:hover {.makeHover(@color-green)} 
} 
.bg-blue { 
    background: @color-blue; 
    &:hover {.makeHover(@color-blue)} 
} 

:

.bg-red { 
    background: #cc0000; 
} 
.bg-red:hover { 
    background: #ee2222; 
} 
.bg-green { 
    background: #00cc00; 
} 
.bg-green:hover { 
    background: #22ee22; 
} 
.bg-blue { 
    background: #0000cc; 
} 
.bg-blue:hover { 
    background: #2222ee; 
} 

당신 수도 use a built in color function for the darkening합니다.

실제로 더 일반적인 CSS가 필요한 경우 의사 클래스 like this fiddle demonstrates을 사용하여 작업하십시오. CSS3 브라우저 만 타겟팅하는 경우 해당 바이올린의 :before 요소를 제거하고 .block 요소 인 background에서 rgba() 색상 형식을 사용할 수 있습니다.

Answer 2

직장에서 매일 여기 LESS를 사용하여 . 나는 그것이 단지 LESS를 사용함으로써 처리 된 후에 엘레멘트의 색깔을 얻는 방법이 있다고 믿지 않는다. 나는 당신이 이것을하기 위해 Jquery 나 일종의 스크립팅을 사용해야 할 것이라고 생각한다.

다음은 색상을 조작 할 수있는 많은 도구가있는 플러그인입니다. jQuery color plugin xcolor

다른 색상을 추가 할 수 있도록 찾은 RGB 요소 색상을 16 진수로 변환하는 또 다른 기능이 필요할 수도 있습니다. Jquery convert RGB to HEX colour values

희망이 도움이 될 것입니다.