Less.js: 사용자 정의 함수 생성

혼합과 구별하고 CSS 구문에 더 가깝게 유지하려면 다음과 같이 할 수 있습니다.

@darkfadein(<strong i="6">@color</strong>, @value): fadein(darken(<strong i="7">@color</strong>, @value));

매개변수에 의존하는 변수와 같은 종류(생각해보면 일종의 함수 =)

@souldreamer 의 구문에 +1 .

그러나 @souldreamer 의 구문을 사용하면 일부를 작성할 수 없습니다.
값을 변수에 넣고 다시 사용하십시오.

다음 구문을 사용할 수 있습니다.

  @darkfadein(<strong i="9">@color</strong>, @value) {
     <strong i="10">@foo</strong>: darken(<strong i="11">@color</strong>, @value);
     return: fadein(@foo);
  }

이후 버전에서는 다음과 같은 작업을 수행할 수 있습니다.

  @darkfadein(<strong i="15">@color</strong>, @value) {
     <strong i="16">@foo</strong>: darken(<strong i="17">@color</strong>, @value);
     for(<strong i="18">@i</strong> = 0; <strong i="19">@i</strong> < 5; @i++): {
       <strong i="20">@foo</strong>: darken(<strong i="21">@foo</strong>, @i);
     };
     return: fadein(@foo);
  }

값을 반환하기 위해 일종의 함수를 사용해야 하는 비슷한 필요성이 있습니다. 나는 두 가지 가능한 해결책이 있다고 생각합니다. 한 가지 해결책은 변수 구문을 위에서 설명한

@grid-width(<strong i="7">@columns</strong>, @column-width) {
    <strong i="8">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

두 번째 접근 방식은 믹스인을 사용하는 것입니다. 컴파일러는 어쨌든 믹스인을 자바스크립트 함수로 취급하기 때문에 _믹스인에 return 기능을 추가하는 것은 간단한 해결책이 될 것입니다. 다음과 같이 표시됩니다.

.grid-width(<strong i="13">@columns</strong>, @column-width) {
    <strong i="14">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

SASS의 "기능적 지시문"은 유사한 결과를 제공하지만 이 믹스인 솔루션이 훨씬 더 우아할 것이라고 생각합니다.

508호 와 609호도 이와 관련이 있습니다.

@tylertate 의 두 번째 구문이 가장 같습니다 . 당신이 말했듯이 이미 믹스인을 JavaScript로 구문 분석하기 때문에 가장 쉬운 것 같습니다.

믹스인으로 이런 것이 가능하다고 생각하는 사람이 있습니까?

.grid-width(<strong i="8">@columns</strong>, @column-width) {
    <strong i="9">@computedWidth</strong> = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      <strong i="10">@computedWidth</strong> = darken(<strong i="11">@computedWidth</strong>, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

정의된 LESS 플러그인 구문과 같은 것을 보고 프로그래밍과 같은 로직을 JavaScript LESS 플러그인으로 옮기고 싶습니다. 이러한 제안은 현재 LESS 구문 및 디자인과 일치하지 않습니다.

동의합니다. 방법을 알면 기능을 추가하는 것이 비교적 간단하기 때문에 표시된 문서에 대한 버그가 있습니다.

그래서 결의안은 무엇이었습니까?

문서화해야 합니다. https://github.com/cloudhead/lesscss.org/issues/54 참조

less.js의 연결된 문제는 브라우저에서 less에 함수를 추가하는 방법을 보여줍니다.

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

현재로서는 기능을 노드 버전에 플러그인할 수 있는 방법이 없지만,

감사합니다. LESS의 구문에서 JavaScript를 가져올 수 있는 위치와 응답에 감사드립니다.

그러나 mixin의 반환 값을 특정 속성과 연관시키지 않는 것은 분명한 사용 사례처럼 보입니다. 그리드를 사용하는 사람은 누구나 @Deltachaos 가 하려고 했던 것을 하고 싶어할 것입니다. 플러그인을 만드는 수준으로 떨어지지 않고 이것을 달성할 수 있다면 좋을 것입니다.

그것은 까다로운 일입니다. 루프가 필요하거나 if가 플러그인에 있어야 하는 경우입니다.

그러나 특정 값으로 3개의 적은 함수를 호출하는 경우 구문을 DRY로 만들기 위해 내부를 덜 추출할 수 있다는 점에 동의합니다. 한 곳에서 5% 어둡게 하고 싶습니다.

나는 다시 열었지만 이것은 다른 곳에서 복제 될 수 있습니다. 우리는 보게 될 것입니다.

현재 mixins 범위의 변수는 모두 외부 범위에 복사됩니다. 이는 일종의 변수를 반환하는 방법입니다. 그러나 끔찍한 문제를 일으키고 제거하고 싶습니다.

#538의 중복

"mixins 범위의 변수는 모두 외부 범위에 복사됩니다."

어, 정말? 예, 그 행동을 제거합시다. 변수가 내보내기로 표시되거나 자동 누출이 아닌 다른 것으로 표시되는 것이 좋습니다. 그것은 나에게 예상되는 행동이 아닙니다. 변수는 블록 범위여야 합니다.

예, 백도어 버그를 통해 기능을 지원하는 것과 같습니다.

해킹을 찾았습니다. 전역 js 함수를 선언하면 나중에 사용할 수 있습니다!

<strong i="6">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="7">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain 은 지금 같은 해킹을 발견했습니다 :)

@fabienevain 잘 작동합니다, 감사합니다~ :+1:

process.mainModule에 액세스하여 동일한 eval 감옥에서 실제 기능을 만들 수 있다는 것을 발견했습니다... 단, process.mainModule.children 를 반복해야 하고 어떤 이유로 순서가 변경되면 less.js와 일치해야 할 수도 있습니다. 미래. 저는 맹목적으로 덜 신뢰하는 것이 세 번째 모듈이라고 반복하지 않을 계획입니다.

불행히도 require 에 액세스할 수는 없지만 fs 및 less에서 이미 필요한 기타 항목에 액세스할 수 있습니다.

<strong i="10">@anything</strong>: `(function() {
    // console.log(process.mainModule.children[0].exports); // node fs is here
    // console.log(process.mainModule.children[2].children) // children of less, more node modules!
    var less = process.mainModule.children[2].exports;

    less.functions.functionRegistry.add("firstfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("00ff00");
    });

    less.functions.functionRegistry.add("secondfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("ff0000");
    });
})()`;


test {
    background: firstfunc(white);
    color: secondfunc(black);
}

실제 기능을 갖는 것에 대한 깔끔한 점은 이 context 변수입니다. 이 변수에는 처리 중인 파일과 같은 세부 정보가 포함되어 있으므로 설정 등을 사용하여 자체 svg 데이터 uri 가져오기를 만들 수 있습니다.

편집 JS를 배제하려고 할 때 왜 백틱이 도입되는지 궁금합니다. 나는 가능한 한 복사 및 붙여 넣기가 가능한 LESS를 좋아하므로 플러그인이 좋지 않습니다.

나는 가능한 한 복사 및 붙여 넣기가 가능한 LESS를 좋아하므로 플러그인이 좋지 않습니다.

따라서 인라인 백틱 핵에서 node.js 기반 less.js 컴파일러가 필요하더라도 코드가 "복사 및 붙여넣기 가능"하다고 가정하지만 동시에 플러그인을 사용하면 잘못되었다고 생각하십니까? 도!

@seven-phase-max 내 도구는 꽤 엉망입니다. lessc 명령줄 인수를 제어할 수 있다면 아마도 플러그인을 사용할 것입니다. (또는 내가 모든 것을 채우는 하나의 마스터 플러그인이 있습니다) 하지만 아니요, 제 환경을 망쳤고 Eclipse 작업 공간에 ~100개의 WP 테마가 있습니다. 이 테마는 모든 빌드 명령 등이 거기에 붙어 있기 때문에 제거할 수 없습니다. .

@Ciantic 우선 필요한 경우 사용자 정의 기능 플러그인을 사용하기 위해 특정 명령줄 옵션이 필요하지 않습니다(#2479). 두 번째로, 컴파일러 옵션을 제어할 수 없도록 하는 심하게 꼬인 환경이 무엇이든 의심스럽습니다(결국 lessc "executable"은 실제 노드 스크립트로 리디렉션되는 OS 콘솔 스크립트이므로 어떤 식으로든 _어떤 것_이든).

어느 쪽이든 내 의견은 "복사 및 붙여 넣기 대 플러그인"adv에 관한 것입니다. 깨진 빌드 도구/체인에 대한 해결 방법일 뿐입니다.

@seven-phases-max 가져오기 플러그인은 내가 필요로 하는 도구와 정확히 일치합니다! 전역 레지스트리가 아닌 내 프로젝트 내부에 함수를 정의하고 싶지만 이렇게 하면 프로젝트 내에서 함수를 편집할 수 있고 전역 함수를 변경하더라도 수십억 개의 파일이 손상되는 것에 대해 걱정할 필요가 없습니다.

@Ciantic

전역 레지스트리가 아닌 내 프로젝트 내부에 함수를 정의하고 싶지만 이렇게 하면 프로젝트 내에서 함수를 편집할 수 있고 전역 함수를 변경하더라도 수십억 개의 파일이 손상되는 것에 대해 걱정할 필요가 없습니다.

더 읽어보세요. 풀 리퀘스트의 초기 초안은 글로벌 등록의 쉬운 경로를 따랐지만 일부 통찰력으로 나중에 범위-로컬 등록을 수행하도록 수정했습니다. 예

.my-mixin() {
  <strong i="10">@plugin</strong> "my-func.js";
  <strong i="11">@value</strong> : my-func();
}

믹스인 범위 외부로 my-func 누출되지 않습니다. 경로는 물론 @plugin 선언이 포함된 파일과도 관련이 있으므로 모든 것이 깔끔하게 번들로 제공되어 타사에서 사용할 수 있습니다. 100% _투명하게_.

그것이 이 기능의 디자인 목표였습니다. ^_^

less.js는 사용자 정의 색상 조합을 추가하는 데 필요합니다.
코드를 커밋하는 동안 문제가 발생합니다.
지원하지만 less.js가 필요합니다.

해킹을 찾았습니다. 전역 js 함수를 선언하면 나중에 사용할 수 있습니다!

<strong i="7">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="8">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain @fn 에서 더 적은 기능을 사용하려면 어떻게 해야 합니까? hsvsaturation 、 unit 등과 같은 .Thx.

@hiyangguo

인라인 JS 표현식을 사용하면 안 됩니다.
사용자 정의 함수를 적절한 방식으로 빌드하고 등록합니다.
문서를 읽으십시오. 모든 것이 있습니다: http://lesscss.org/features/#plugin -atrules-feature

@rjgotten 네 , 정말 감사합니다.