Less.js: 가드가 정의되지 않은 변수로 작업할 수 있도록 허용

+1
이것은 또한 라이브러리에 기본 색상을 설정하는 데 사용할 수 있습니다.
다음과 같은 경우를 상상해보십시오.
특정 앱(예: 웹사이트의 메인 메뉴)에 대한 파일이 적습니다.
기본 색상이 변수로 정의되는 기본 less 파일에서 이 less 파일을 가져옵니다.
이제 기본 메뉴의 less 파일에서 기본 색상을 사용하면 기본 파일에 따라 달라집니다.
변수의 존재를 확인할 수 있다면 모듈 정의 색상으로 대체할 수 있습니다.
다음은 메뉴가 적은 파일을 상상하는 방법의 예입니다.

@menu-base-color: white;
@menu-base-color: @base-color when (@base-color);
...or...
@menu-base-color: @base-color when isset(@base-color);

+1, 우리는 이미 istext , isnumber isdefined 를 가지고 있고 isundefined 는 적은 테마로 큰 도움이 될 것입니다.

예를 들어 isdefined $인 경우 $ value 또는 userValue 를 사용합니다.

LESS를 사용하여 Semantic UI에 대한 테마 규칙을 설정하려고 할 때 이 문제가 많이 발생합니다.

이것에 +1 - 정말 좋을 것입니다.

나도 이것에 +1

is-defined 기능을 추가하는 것은 큰 문제가 아닙니다(v2가 릴리스되는 즉시 첫 번째 플러그인 중 하나에 나타날 것으로 예상합니다). 솔직히 말해서 슬픈 점은 이 기능을 원하는 사람들이 위의 두 가지 사용 사례를 그런 기능 없이 해결할 수 있다는 사실을 놓치고 있다는 것입니다.

@InitArt 의 사용 사례:

// library.less
<strong i="9">@variable</strong>: false;

a when (@variable) {
    color: red;
}

// ......................................
// user.less
<strong i="10">@import</strong> "library.less"
<strong i="11">@variable</strong>: true;

@nemesis13 의 사용 사례:

// library.less
@base-color: green;
@menu-base-color: @base-color;

.menu {
    background-color: @menu-base-color;
}

// ......................................
// user.less
<strong i="16">@import</strong> "library.less"
@base-color: white;
// or:
@menu-base-color: black;
// or whatever...

즉, 요약하면 변수 값을 자유롭게 재정의할 수 있으므로 변수가 정의되었는지 테스트하는 대신 해당 변수에 대한 기본값을 제공하면 됩니다.

왜 max의 예가 그들에게 적합하지 않은지 대답할 수 있습니까? 나는 할 수있다
변수가 위에 정의되어 있는지 또는
수입품 아래? 아니면 다른 것입니까?
우리는 사용 사례가 없는 것을 고려하지 않을 것입니다.
이렇게 하는 것의 단점은 변수를 잘못 입력한 사람들이
오류. 경고와 함께 이 문제를 해결할 수 있지만 다음에서 수행한 경우
당신은 경고를 원하지 않을 것입니다. 그것이 나의 유일한 문제입니다.
제안.

이것은 결과 CSS의 크기를 줄이기 위해 테마를 정의할 때 특히 유용합니다. 일반적으로 테마를 만들 때 많은 속성을 설정하는 것이 좋습니다. 그러나 사용자는 나머지 속성을 설정하지 않고 일부만 설정하기를 원할 수 있습니다. 물론 기본값으로 설정하면 일반적으로 작동하지만 최종 CSS가 부풀려집니다.

다음 기본 테마(템플릿)를 고려하십시오.

.my-class {
    color: @text-color;
    background-color: @background-color;
    border-color: @border-color;
}

테마 사용자는 나머지 속성을 설정하지 않고 텍스트 색상만 설정하기를 원할 수 있습니다. 물론 값을 "초기", "투명", "상속" 등으로 설정할 수 있지만 이는 최종 CSS의 크기를 증가시킵니다. 테마에는 수백 가지 속성이 있는 경향이 있으므로 크기가 상당히 증가할 수 있습니다.

@JechoJekov

이 기능 요청의 요점을 놓치고 있다고 생각합니다. 사용 사례의 경우 여전히 이러한 모든 속성을 보호해야 한다는 점에 유의하십시오(따라서 위에서 두 개의 게시물을 제안한 근거가 여전히 적용됨). 그래서 나는 당신의 유스 케이스가 #1400에 새로운 것을 추가했다고 생각하지 않습니다(기본적으로 "모든 값이 정의되지 않은 변수로 설정된 경우 속성 건너뛰기" 또는 이와 유사한 것과 같은 다른 기능을 제안하는 것처럼 보이지만 다른 큰 이야기).

@seven-phases-max

변수를 "undefined" 또는 "unset" 값으로 설정할 수 있다면 가장 좋을 것입니다. 속성을 이러한 값으로 설정하면 속성이 최종 CSS에서 렌더링되지 않습니다. 이렇게 하면 구문이 단순화되고 변수가 선언되었는지 확인할 수 있습니다.

@JechoJekov

변수를 "undefined" 또는 "unset" 값으로 설정할 수 있다면 가장 좋을 것입니다.

내가 언급했듯이 이것은 자체 티켓(자체 토론 포함)이 필요한 또 다른 기능입니다.

로드맵에 대한 몇 가지 설명: 이것은 "ReadyForImplementation"으로 표시되지만 이 스레드에는 합의가 없는 것 같으며 @seven-phases-max가 적절한 대안을 제안한 것 같습니다. @lukeapage @seven-phases-max, 구현 준비가 제거되어야 합니까?

@matthew-dean 아무 생각이 없습니다. 여기에서 "ReadyForImplementation"이 여전히 유효하다고 생각합니다. "이 기능은 실제로 필요하지 않은 것 같지만 누군가가 그러한 것을 구현하는 PR을 생각해 낸다면 저항이 없을 것입니다" 또는 일종의 :)

어떻게한다는거야? (고려)

나에게 "구현 준비 완료"란 해결되거나 구현되어야 하는 _반드시_만장일치일 필요는 없지만 일반적인 합의가 있음을 의미합니다. "고려중"이 귀하의 정의에 부합한다고 생각합니다.

범위 지정을 사용할 때 여전히 이 문제가 발생합니다.

<strong i="6">@foo</strong>: 'bar';
& { 
  // not sure if <strong i="7">@foo</strong> is defined
}

isDefined 을(를) 사용할 수 있는 기능을 원합니다.

is-defined 와 같은 것이 (구문적인 설탕으로) 의미가 있지만 실제로 필요한 것은 아닙니다. 스타일 내에서 변수를 사용하는 경우 _항상_ @foo 를 정의하십시오(필요한 기본값이 무엇이든). 결국 정의할 필요가 있다고 예측할 수 있습니다. 예:

// in a far far away galaxy of your library default variables:
<strong i="8">@foo</strong>: undefined;

// the code where you need it
& when not(<strong i="9">@foo</strong> = undefined) { 
    // <strong i="10">@foo</strong> is defined by user    
}

// some user code
<strong i="11">@foo</strong>: bar;

위의 예에서 이미 이것을 작성한 것 같지만(저는 이 기능의 부족이 무엇에도 눈에 띄지 않는다는 사실을 분명히 하려고 합니다. 사용 사례를 알고 있다면 하나, 공유하십시오).

브라우저에서 테마 미리보기를 설정하려고 합니다.

즉, less.js 를 사용하고 기본 @theme 변수를 런타임 설정으로 덮어써야 합니다.

알라

window.less.modifyVars({
  theme: 'someOtherValue'
})

내 LESS에서 다음을 포함하는 글로벌 theme.less 파일을 가져오고 있습니다.

<strong i="14">@theme</strong>: undefined;

.setTheme {
  <strong i="15">@theme</strong> : 'default';
}
.setTheme;

나도 방금 해봤는데

<strong i="19">@theme</strong>: 'default';

첫 번째 경우에 출력되는 값은 undefined 이고 두 번째 경우에는 modifyVars 에 설정한 값에 관계없이 항상 default 입니다.

예를 보려면 여기에서 테마 드롭다운을 클릭하세요 .

현재 해결 방법(라이브 사이트에 있음)은 변수 가져오기 경로를 수동으로 잡고 regexp를 사용하여 구문 분석한 다음 modifyVars 를 사용하여 모든 변수를 가져오는 것입니다. 이것이 꽤 지저분 하다고 생각할 수 있습니다.

@seven-phases-max @import 가 문제를 일으키는 매우 구체적인 테스트 사례로 좁혔습니다.

두 경우 모두 다음을 가정합니다.

자바스크립트

window.less.modifyVars({
  theme: 'changedValue'
});

theme.less의 첫 번째 경우에는 outer 가 changedValue 로 올바르게 설정되어 있습니다.

component.less

<strong i="17">@import</strong> 'theme.less';

테마.리스

<strong i="22">@theme</strong>: 'default';
.outer {
  value: @theme; // value is set to changedValue
}

이 실패한 경우 theme.less에서 @theme 는 changedValue default 로 설정됩니다.

component.less

<strong i="32">@import</strong> 'theme.less';

테마.리스

<strong i="37">@theme</strong>: 'default';
<strong i="38">@import</strong> "@{theme}"; // theme is set to default not changedValue

"var in mixin"의 경우 스니펫은 다음과 같이 바뀝니다.

// defaults:
.setTheme {
   <strong i="6">@theme</strong>: undefined;
}

// custom:
.setTheme {
  <strong i="7">@theme</strong>: 'default';
}
.setTheme;

modifyVars 의 경우 시도한 스니펫에 대해 항상 'someOtherValue' 가 되어야 합니다( modifyVars 는 컴파일된 파일의 끝에 일반 <strong i="14">@theme</strong>: 'someOtherValue'; 라인을 추가함으로써 작동하기 때문입니다. 소스 코드). 따라서 modifyVars 가 작동하지 않으면 문제는 다른 곳에 있을 가능성이 큽니다.
button 페이지 코드를 보았지만 무엇이 잘못되었을 수 있는지 빨리 말하기에는 너무 복잡합니다. 얼핏 보면 Less 코드가 어떻게 재컴파일되고 결과 CSS가 modifyVars modifyVars 에 다시 적용되는지 알 수 없습니다(또는 이해할 수 없을 수도 있음) less.refreshStyles modifyVars ).

Btw., 만일을 대비하여 is-default 를 다음과 같이 사용할 계획이 없다고 확신하십니까?

.setTheme when not(is-defined(@theme)) {
  <strong i="26">@theme</strong>: 'default';
}
.setTheme;

? 그렇다면 문제는 이러한 코드가 지연 평가 원칙을 직접 위반한다는 것입니다( is-defined 는 변수가 정의되지 않은 경우 false를 반환해야 하지만 해당 범위에서 즉시 정의되기 때문에 , is-defined 도 true -> unsolvable recursion을 반환합니다(조건부 명령형 재정의가 안전하게 허용될 수 없는 이유에 대한 자세한 내용은 Less #2072 참조).
즉, 실제로 예상대로 작동할 수 있지만( is-defined 가 이러한 재귀를 명시적으로 감지하고 구제하도록 코딩되지 않는 한), 일종의 지정되지 않은/정의되지 않은 동작으로, 정상적인 변수 가시성 규칙과의 일관성 없이 더 엉망.

@jlukic

<strong i="8">@theme</strong>: 'default';
<strong i="9">@import</strong> "@{theme}"; // theme is set to default not changedValue

네, 이것도 제 의심 중 하나였습니다. (불행히도 지금 이것을 테스트할 수 없고 어떻게 이런 일이 일어날지 짐작할 수도 없지만 가져오기에서 변수를 사용하는 것이 진정한 흑마법이기 때문에 가능합니다. 전용 이것이 문제인 경우 문제 보고서).

나는 그것이 그 멋진 흑마법과 관련이 있다고 확신합니다.

디버그할 매우 간단한 파일로 작업했지만 아직 테스트 사례 저장소를 만들 기회가 없었습니다.

내 테스트에서 실패는 가져오기에서 {@variable} 값을 사용하는 것과 관련이 있지만 CSS 속성에서는 사용되지 않습니다.

적은 비용으로 테마를 정말 즐기고 싶다면 이러한 문제를 해결하고 싶습니다. 다음은 지난 주 Meteor DevShop에서 선보인 LESS의 재미있는 테마 예시입니다 (오른쪽 상단의 페인트통 아이콘 클릭).

@jlukic 나는 그것을 테스트했고 lessc 와 less.js 를 사용하여 예상한 대로 가져오기의 vars에 대해 modifyVars 작동합니다( codepen 데모 참조). 요점 무서운 URL에서 가져 오지만 페이지가 수행해야하는 것과 동일하다고 생각합니다 ... 그래서 실제로 문제는 다른 곳에있는 것 같습니다).

시간을 내어 테스트 케이스를 만들어 주셔서 감사합니다. 이것은 꽤 명확한 컷입니다. 나에게 무슨 일이 일어나고 있는지 잘 모르겠습니다. 조사해야 할 것입니다.

이 요청에 대한 움직임이 있었습니까? 나는 얼마 동안 정의되지 않은 변수 검사에 대해 불안해했습니다. 현재로서는 이상적이지 않은 해결 방법이 있습니다...

p {
  & when not (@body-text-color = null) {
    color: @body-text-color;
  }
}

그러나 이것이 작동하려면 변수가 존재해야 하며 기본적으로 null 로 정의되어야 합니다. 변수가 처음에 존재하는지 여부를 대신 확인할 수 있다면 훨씬 더 효과적이고 유연할 것입니다.

+1

요약하자면 플러그인 내에서 is-defined(name) (및/또는 get-value-of(var-name, fallback-value-if-not-defined) ) 기능을 구현하려면 15줄 미만의 코드가 필요합니다. 그러니 당신이 충분히 용감하다면 그렇게 하십시오.

이것에 +1. 플러그인으로서 이에 대한 진전이 있습니까? 내 말은, @seven-phases-max는 대부분의 기여자보다 코드를 더 잘 알고 있다고 생각합니다. 약 15줄의 코드가 필요한 경우 아직 완료되지 않은 이유는 무엇입니까?

약 15줄의 코드가 필요한 경우 아직 완료되지 않은 이유는 무엇입니까?

아무도 관심이 없기 때문에? 다른 사람이 이 작업을 수행할 때 모든 기능은 훌륭하고 "매우 유용합니다"... 하지만 자신의 시간에 대해서는 마술처럼 그렇게 중요하지 않습니다 ;)

대부분의 기여자보다 코드를 더 잘 알고 있습니다.

이것은 내가 다른 사람의 관심사 뒤에 제 자신의 관심사를 넣어야 한다는 의미는 아닙니다. 죄송합니다(특히 그것이 제가 개인적으로 오용/잘못된 코드 스타일로 취급하는 것을 고무하는 것이라면).

@ashenden 의 사용 사례에 대해 공허하게 들리지 않도록 다음은 결함 없이 "알 수 없음"(일반적인 CSS 재정의가 어떤 이유로 적용되지 않는 경우를 분명히 가정)으로 사용자 정의할 수 있는 규칙 세트를 만드는 적절한 방법입니다. "blind-move-every-CSS-value-to-a-variable-plus-use-something-that-you-dont-use"에 대한 아이디어(나는 그것이 실제로 왜 망가졌는지에 대한 이야기이기 때문에 자세히 설명하지 않겠습니다. 긴 블로그 포스트).

일반적으로 "hooks"라는 개념이 있으므로 다음은 "can't make my mind up festival"입니다.

// .............................................
// base code:

p {
    & when not (is-defined(@body-text-color)) {
        color: @body-text-color;
    }
    & when not (is-defined(@body-text-color)) {
        background-color: @body-back-color;
    }
}

span {
    & when not (is-defined(@body-text-color)) {
        color: @body-text-color;
    }
    & when not (is-defined(@body-text-color)) {
        background-color: @body-back-color;
    }
}

// .............................................
// customization:

@body-back-color: blue; // how about gradient?

다음으로 대체되어야 합니다.

// .............................................
// base code:

p {
    .body-text();
    .body-back();
    // ^ it's actually better to group all this into a singe entity, e.g. .p()
    // so that as you don't know WHAT or HOW to be customized
    // you don't pre-enforce any limitations and/or hardcoded approach
    // for something YOU do not even write
}

span {
    .body-text();
    .body-back();
}

.body-text() {}
.body-back() {}

// .............................................
// customization:

.body-back() {background-color: blue}

선을 세고, 가능성을 세고, 한계를 세어보십시오.
즉, 일부 CSS 속성을 사용하지 않는다면 사용할 사람들을 위해 그대로 두십시오.

여러분, 여기에서 제가 이 문제에 직면했습니다. 이 예제를 살펴보고 이것이 유효한 경우이고 is-undefined 없이 고칠 수 없는지 알려주세요.

다음과 같은 모듈과 같은 라이브러리에 테마를 로드하고 싶습니다.

내 핵심 앱에서 변수 @theme : 'yellow'를 정의한 다음 라이브러리를 덜 가져옵니다.

그리고 이 경우에 less 라이브러리는 다음과 같이 보일 수 있습니다.

@import '테마/@{테마}';

신체 {
배경: @primaryColor;
}

이런 식으로 @primaryColor : yellow 및 @primaryColor : red를 사용하여 yellow.less 및 default.less를 가질 수 있습니다.

결국 나는 primaryColor와 같은 의미론적 변수 이름을 사용하여 라이브러리를 작성하고 이러한 변수가 정의된 테마 세트를 제공할 수 있습니다. 그리고 라이브러리 사용자는 앱에서 테마 이름을 정의하고 라이브러리 스타일을 가져오기만 하면 됩니다.

알겠습니다. 신경쓰지 마세요. 다음과 같이 가져오기 믹스인이 필요합니다.

<strong i="6">@theme</strong>: 'default';

.imports(@theme) when (<strong i="7">@theme</strong> = 'yellow') {
    <strong i="8">@import</strong> "themes/yellow";
}
.imports(@theme) when (<strong i="9">@theme</strong> = 'default') {
    <strong i="10">@import</strong> "themes/default";
}
.imports(@theme);

@waterplea 다음과 같이 코드를 단순화할 수 있습니다.

<strong i="7">@theme</strong>: default;

.imports(yellow) {<strong i="8">@import</strong> "themes/yellow";}
.imports(default) {<strong i="9">@import</strong> "themes/default";}
.imports(@theme);

또한 제거된 중복 따옴표도 기록해 두십시오.

솔직히 말해서 <strong i="13">@theme</strong>: yellow; (+ 모든 믹스인 코드)가 명시적인 <strong i="15">@import</strong> "themes/yellow"; 라인보다 나은 방법을 알 수 없습니다. 즉, 우선 재정의 를 알고 있습니까? 즉, 라이브러리 사용자가 yellow 항목을 적용해야 하는 경우 기본 <strong i="18">@import</strong> "themes/default"; 을 숨길 필요가 없습니다. 그녀는 노란색 테마를 가져 오기만 하면 됩니다. 같은 한 줄) 및 짜잔 - 라이브러리는 노란색 파일에 지정된 변수 값을 사용합니다.

테마를 재정의하거나 사전 설정 테마로 전환하는 파일을 선택적으로 가져왔습니다. 라이브러리를 사용하는 프로젝트에서 프로젝트에 다른 테마가 필요한 경우 해당 파일에 대한 별칭을 노드 모듈로 사용하도록 webpack을 구성합니다. 내가 전에 쓴 것 또는 당신이 쓴 것은 우리가 Angular용 UI 키트를 구축하고 있고 고도로 모듈화되어 있기 때문에 작동하지 않을 것입니다. 하나의 버튼만 가져오거나 컨트롤을 선택할 수 있으며 모든 스타일 캡슐화와 함께 사용 중인 테마를 인식해야 합니다. 솔루션은 설정하기 쉽기 때문에 만족합니다.

우리가 Angular용 UI 키트를 구축하고 있고 고도로 모듈화되어 있으므로 귀하가 작성한 내용은 우리의 경우 작동하지 않습니다.

_{나는 이것을 무한한 시간 전에 본 적이 있습니다. 이것은 가장 슬픈 덜(잘못) 이해 문제 중 하나입니다. 사람들은 기본적인 덜 게으른 평가 원칙을 놓치고, 자연스러운 덜 재정의를 사용하는 대신 무거운 파일 주입으로 라이브러리를 구성합니다. 정반대의 변수 의미를 가진 언어(예: PHP, Sass 등)의 습관에서 영감을 받은 기반 사용자 정의 패턴. "얘들아, 잘못했어!"}

나는 그것을 올바르게 이해하고 싶습니다. 나는 모든 것을 이해한다고 주장하는 것이 아닙니다. :) 제 예에 대한 귀하의 제안을 설명하시겠습니까? 우리가 얻은 것은 다음과 같습니다.

다음은 최소 구조적 예입니다.

도서관:

• import.less
  <strong i="10">@import</strong> 'theme-default';
<strong i="13">@import</strong> 'mixins';
• mixins.less
  some mixins here like resetting default browser button styles
• 테마-default.less
  <strong i="20">@primary</strong>: red;
<strong i="23">@secondary</strong>: blue;
• theme-secondary.less
  <strong i="27">@primary</strong>: green;
<strong i="30">@secondary</strong>: yellow;
• 버튼 컴포넌트
  <strong i="34">@import</strong> 'import';
.button { color: @primary; }

프로젝트 1(기본 테마를 사용해야 함):

• 요소
  <strong i="42">@import</strong> 'import';
body { background: @secondary; }

프로젝트 2(2차 테마를 사용해야 함):

• 요소
  <strong i="50">@import</strong> 'import';
body { background: @secondary; }

라이브러리는 노드 모듈로 추가되고 프로젝트 내에서는 라이브러리에서 버튼 구성 요소만 가져옵니다. 자체 파일이 적은 해당 버튼에 대한 Angular 모듈이므로 프로젝트 1 또는 프로젝트 2의 나머지 부분과 별도로 컴파일됩니다.

나는 이것에 대해 잠시 동안 생각했고 프로젝트 1 또는 프로젝트 2가 구성 요소와 프로젝트 자체 코드를 모두 컴파일할 때 사용할 테마 파일을 설정할 수 있도록 더 적은 수의 파일을 구성하는 방법을 생각해낼 수 없었습니다. 프로젝트 코드 내에서 버튼 구성 요소의 스타일을 재정의하는 방법이 표시되지 않습니다.

대신 기본적으로 import.less를 작성하는 방법은 다음과 같습니다.
<strong i="58">@import</strong> 'theme-default';
<strong i="61">@import</strong> 'mixins';
<strong i="64">@import</strong> (optional) '~custom-theme';

그리고 프로젝트 내에서 프로젝트 코드와 라이브러리 구성 요소 모두에 대한 테마 변수를 재정의하려면 webpack을 사용하여 이 파일의 별칭을 모듈로 지정합니다. 이 파일은 say @primary 를 명시적으로 재정의하거나 보조 테마로 전환할 수 있습니다.
<strong i="69">@import</strong> '~myLibrary/styles/theme-secondary';

그래서 나는 재정의에 대해 알고 있습니다. 문제는 라이브러리의 사용자가 "주 라이브러리 파일 이후의 모든 위치"와 라이브러리 구성 요소 코드 사이에 들어갈 방법이 없다는 것입니다. 나는 당신이 말한 것이 스타일 캡슐화 없는 프레임워크에서 작동한다는 것을 알지만 Angular의 경우 작동하지 않거나 솔루션에서 무언가를 오해했습니다.

내가 참조. 그런 다음 우리는 실제로 같은 것에 대해 말하고 있습니다(단순히 다른 단어로). buttonComponent (또는 다른 구성 요소)가 별도로 컴파일되는 즉시 "프로젝트 사용자 지정 마스터"는 import.less 파일로 남아 있고 제가 제안한 대로 정확히 수행했습니다. ( Project 1 및 Project 2 는 buttonComponent 와 같은 수준의 또 다른 "다른 모든 것"(또는 "올인원"?) 구성 요소로 바뀌고 꽤 "프로젝트").

이 방법으로 나는 당신이 내 취향에 "올바른 일을했습니다"라고 말할 것입니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

@stale 핑.

기술적으로 이 기능을 구현하는 플러그인은 2015년부터 사용할 수 있습니다. 그러나 개인적으로 테스트한 적이 없으므로 문제가 발생하더라도 저를 비난하지 마십시오(참고용일 뿐입니다).

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

그래서... 나는 이 스레드를 다시 훑어보았고 이것이 대부분 사람들이 Less 범위를 오해하는 경우인지 여부를 결정할 수 없습니다.

vars가 정의되어 있는지 확인할 필요가 없습니다. 사용하려는 경우 Vars를 정의해야 합니다.

<strong i="7">@import</strong> "library";  // contains @library-color: blue;

@library-color: red;

.box {
  color: @library-color;
}

_change_ 값을 기반으로 속성을 조건부로 설정해야 하는 필요성을 이해하지 못합니다. 속성이 변수로 설정되어 있으면 변수의 값을 변경하기만 하면 됩니다.

즉, library.less 에 다음이 있는 경우:

@library-color: blue;
.box {
  color: @library-color;
}

출력을 설정하기 위해 필요한 모든 작업:

<strong i="16">@import</strong> "library";
@library-color: red;

그러면 다음과 같이 출력됩니다.

.box {
  color: red;
}

해당 스레드의 OP와 다른 사람들이 해당 동작을 이해합니까?

"dos var exist"의 사용 사례는 플래그를 수행하는 좋은 방법이라고 생각합니다. 즉, 개념적으로 직접적인 "거짓"이 없다고 생각합니다. 또는 true 가 유일한 "truthy" 값이라는 것은 이례적인 일입니다. 즉, 행동의 문제라기보다는 교육의 문제라고 생각합니다.

이 문제는 일반적으로 기본 변수 값을 선언하는 한 줄로 해결되므로 이 문제를 종료하는 것을 고려해야 한다고 생각합니다. Less v3.5가 더 관대한 거래로 이동함에도 불구하고 경비원 내부의 변수가 더 관대하게 평가될 수 있습니까?

그러나 내 투표는 아니오입니다. @the-variable: false; 는 OP가 추가해야 할 모든 것 같습니다.

이와 관련되어 있다고 생각하는 특정 문제를 해결하는 방법에 대해 질문이 있는 사람은 less gitter 와 @me에 자유롭게 게시하세요.

좋아요, 감사합니다 @calvinjuarez.

이것이 열린 이후에 일어난 일은 if() 함수입니다. 따라서 color: if((@variable), green, red); 를 할 수 있습니다.

@matthew-dean 이 팁을 작성해 주셔서 감사합니다. 3.0 릴리스 노트에서 if()가 추가된 것을 보았지만 이 문제와 관련이 없었습니다. 이 문제에 대한 고유한 사례가 있었습니다(단, 축소 버전을 만들 시간은 아님). 다시 한 번, 대단히 감사합니다. 잘했어, LESS 팀.

@kbav 문제없어요! 그 팁의 맨 위에 있는 또 다른 팁: if() 이 처음 도입되었을 때 기본적으로 when 가드를 "포함"했기 때문에 조건 주위에 괄호가 필요했습니다(예: $#에서 when (@variable) when 다음 부분) when (@variable) ). 그러나 이는 Less 3.6에서 수정되었으므로 위의 예는 괄호 없이 작성할 수 있습니다(최신 버전으로 컴파일하는 경우).

color: if(<strong i="10">@variable</strong>, green, red);