LESS 함수가있는 선형 그래디언트, LESS.JS -> "인식 할 수없는 입력"

Question

변수를 사용하여 선형 그래디언트의 LESS/CSS를 단순화하고 싶습니다. I 시도

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27); 

(정의 기능 및 클래스 (함께 결합) 및 선택기 "BWTable-이동합니다.")

 .BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > td, 
    .BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > th { 
     background: url(data:image/svg+xml;base64,PD...g==); 
     background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */ 
     background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4545484d', endColorstr='#73000000',GradientType=0); /* IE6-8 */ 
    } 

결과 : "ParseError

난 (선언 변수) 시도 : 인식 할 수없는 입력 "

그런데이 문제를 해결하는 좋은 방법입니까? 도와 주신 타이.

Answer 1

매개 변수 mixin (입력 매개 변수가있는 mixin)을 사용하면 컴파일 할 때 직접 출력을 생성하지 않습니다. 다른 블록 내에서 호출되어야합니다. 이것이 코드가 오류를 일으키는 이유입니다. Sitepoint에 대한 기사에서

인용구 :

Mixins can be made parametric, meaning they can take arguments to enhance their utility. A parametric mixin all by itself is not output when compiled. Its properties will only appear when mixed into another block.

대신 당신이 그것을 아래의 방법으로 할 수 있습니다. 데모 용 Click here 위의 다시 수 없습니다 따라서 매개 변수를 사용하지 않는

가

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27); 
.BWTable-hover > tbody > tr:hover > td, 
.BWTable-hover > tbody > tr:hover > th { 
    background: url(data:image/svg+xml;base64,PD...g==); 
    background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */ 
    background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4545484d', endColorstr='#73000000',GradientType=0); /* IE6-8 */ 
} 

참고 :이 매개 변수가 믹스 인 아니라면 다른 한편으로

.hover(@BWTableHoverLineMarkerColor1){ 
& > tbody > tr:hover > td, 
    & > tbody > tr:hover > th { 
     background: url(data:image/svg+xml;base64,PD...g==); 
     background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */ 
     background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */ 
     @startcolor: argb(@BWTableHoverLineMarkerColor1); /* To convert the rgba value to hex format */ 
     @endcolor: argb(fade(@BWTableHoverLineMarkerColor1,45%)); /* To increase alpha for end color */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startcolor}', endColorstr='@{endcolor}',GradientType=0); /* IE6-8 */ 
    } 
} 

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27); 
.BWTable-hover{ 
    .hover(@BWTableHoverLineMarkerColor1); 
} 

, 당신은 단순히 아래와 같이 할 수 있었다 익숙한.