2014-02-07 4 views
1

less-website에서 다음 예제를 발견했습니다. 이것들은 그림자를 만드는 명령입니다. 같은 함수 이름을 가지고 있기 때문에 어떤 것이 먼저 호출되는지 궁금합니다. 왜 그들은 같은 이름을 가지고 있습니까?동일한 이름을 가진 두 함수

@base: #f938ab; 

.box-shadow(@style, @c) when (iscolor(@c)) { 
    -webkit-box-shadow: @style @c; 
    -moz-box-shadow: @style @c; 
    box-shadow:   @style @c; 
} 

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { 
    .box-shadow(@style, rgba(0, 0, 0, @alpha)); 
} 
+0

[패턴 일치] (http://lesscss.org/features/#mixins-parametric-feature-pattern-matching) 및 [믹스 가드] (http://lesscss.org/features/#mixin-guards)를 참조하십시오. -특색). –

답변

4

Less는 동일한 이름 (또는 3, 4, 5 ...)을 가진 두 개의 믹스 인 (실제로는 기능이 아닙니다)을 허용합니다. 둘 다 호출 된 매개 변수와 일치하면 믹스 정의의 순서에 따라 효과를 수행합니다.

이 경우 전달 된 값을 필터링하는 조건부 when 문 때문에이 두 항목을 동시에 호출하지 않습니다. 두 번째 매개 변수가 색상이면 첫 번째 믹스 인이 호출됩니다. 두 번째 값이 숫자이면 두 번째 믹스 인이 호출됩니다.

이 경우 두 번째 믹스 인은 첫 번째 믹스 인을 자체 내에 사용하고 있습니다. 따라서 두 번째 숫자를 호출하여 호출하면 색상이 검정색으로 기본 설정되지만 숫자를 기준으로 불투명도 레벨이 추가됩니다. 그런 다음 첫 번째 믹스 인을 호출하여 정의 된 검은 색으로 최종 속성 값을 실제로 출력합니다.

일반적으로 두 번째 믹스 인과 믹스 인 콜을하기 위해 유연성과 단축키가 허용됩니다.

+0

대단히 감사합니다! – user2952265

관련 문제