LESS lib-css mixin의 목적은 무엇입니까?

.lib-css()믹스 인은 마 젠토 2 LESS 파일에 많이 사용된다. 그러나 그 목적은 명확하지 않으며 믹스 인 정의는 유용한 문서를 제공하지 않습니다.

//
// CSS 속성 추가
// ---------------------------------------------

.lib-css (
    @_특성,
    @_값,
    _ 접두사 : 0
) 언제 (@_prefix = 1)
  아닌 (@_value = '')
  아님 (@_value = false)
  아닌 (추출 (@_value, 1) = false)
  아닌 (추출 (@_value, 2) = false)
  아닌 (추출 (@_value, 3) = false)
  아닌 (추출 (@_value, 4) = false)
  (추출 (@_value, 5) = false) {
  -webkit-@ {_ property} : @_value;
       -moz-@ {_ property} : @_value;
        -ms-@ {_ property} : @_value;
}

.lib-css (
    @_특성,
    @_값,
    _ 접두사 : 0
)이 아닌 경우 (@_value = '')
  아님 (@_value = false)
  아닌 (추출 (@_value, 1) = false)
  아닌 (추출 (@_value, 2) = false)
  아닌 (추출 (@_value, 3) = false)
  아닌 (추출 (@_value, 4) = false)
  (추출 (@_value, 5) = false) {
    @{_자산 가치;
}

믹싱 에지를 사용하여 최첨단 CSS 속성에 벤더 접두사를 추가하려는 이유를 알 수 있지만 (더 이상 필요한 속성은 거의 없지만)이 믹스 인을 사용하여 일반 CSS 속성을 출력하는 이유는 명확하지 않습니다. 누구든지 이것에 빛을 비출 수 있습니까?

내가 볼 수있는 유일한 용도는 접두사와 이전에 선언 된 규칙을 제거하는 것입니다.

접두사

body {
    .lib-css(transition, color .5s ease, @_prefix: 1);
}

출력합니다 :

body {
    webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

이전에 선언 된 규칙을 설정 해제하지 않고 제거

.lib-css()를 설정 해제 또는로 설정하는 대신 특정 변수를 사용하는 모든 규칙을 제거 할 수 있습니다 0또는 none. 예를 들어를 사용하는 모든 규칙을 제거한다고 가정 해 봅시다 @button__shadow. 같은 :

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

하나의 요소에 대해서만 작성하는 것이 더 쉽습니다 box-shadow: none;. 그러나 이것이 20 개의 요소라면, 다음과 같이 모두 제거하는 것이 더 빠릅니다.

@button__shadow: false;

이것은 @variable: none추가하는 대신 코드 줄을 줄임으로써 사용 하는 이점이 있습니다 .

따라서이 두 가지 방법을 비교하십시오.

적게

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

.product-list button {
    box-shadow: none;
}

// Or alternatively

@button__shadow: 0;

산출

적게

@button__shadow: false;

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

산출

출력이없고 규칙이 처리되지 않습니다

이것은 좋은 생각처럼 보이지만 사용 사례는 매우 작습니다. 접두사에 사용할 것입니다. @variable: false예를 들어 하나의 div 내에서만 로컬로 설정할 수 있다면 더 유용 할 것입니다. 불행히도이 작업을 수행 할 수 없었습니다.

핵심 사용법

에서와 같은 일부 변수가 기본적으로 false로 설정되어 있음을 알았습니다 lib/web/css/source/lib/variables/_buttons.less. 필요할 때까지 출력되지 않도록 가정합니다. 또한 좋은 생각입니다.

//  Default = secondary button
@button__color: @primary__color;
@button__background: @color-gray95;
@button__border: 1px solid @color-gray-darken2;
@button__gradient-color-start: false;
@button__gradient-color-end: false;

.LIB-CSS ()는 믹스 인 변수로 전달하여 값이있는 경우 임의의 CSS의 속성을 설정하는데 사용된다. (예)

[![.class {
    .lib-css(border-radius, @button__border-radius);
    .lib-css(border, @button-primary__border);
    .lib-css(color, @button-primary__color);
    .lib-css(background, @color-gray94);
    .lib-css(padding, @indent__s);
}

또한 .lib-css () 는 필요한 경우 -ms-, -webkit- 및 -moz- 접두사를 추가 할 수 있습니다 .

변수가 false 로 설정 되면 .lib-css () 믹스 인 은 코드에 아무 것도 추가하지 않습니다.

.lib-css 변수를 검토하십시오

또한 당신은 아래에 적은 도움을 찾을 수 있습니다

<magento install directory>\lib\web\css\docs\utilities.html