Less.js: "기본" 변수에 대한 지원 추가(SASS의 !default와 유사)

문서 를 참조하십시오.

업데이트: 미래의 방문자를 혼동하지 않기 위해 이 게시물의 이전 댓글을 제거했습니다(여기서 "변수가 아직 정의되지 않은 경우 정의하는 방법" 질문에 답하려고 했으나 "XY 문제"이고 정답에 대한 요점을 놓쳤습니다. Sass-like !default 는 다음과 같습니다. Less에서는 필요한 기능("사용 후 정의")이 Less 변수가 작동하는 방식으로 이미 제공되기 때문에 그런 것은 필요하지 않습니다.

동일한 변수를 두 번 정의하면 마지막 선언이 우선 적용되며 전체 범위에서 유효합니다. 따라서 또 다른 옵션은 변수를 정상적으로 선언하고 사용자에게 라이브러리 뒤에 변수를 포함하도록 요청하는 것입니다.

라이브러리.리스

<strong i="7">@width</strong>: 0;
.mixin {
  width: @width;
}

user.less:

<strong i="11">@import</strong> "library.less"; //first declaration of <strong i="12">@width</strong>
<strong i="13">@width</strong>: 1; //this will override <strong i="14">@width</strong> defined previously
.class {
  .mixin();
}

다음으로 컴파일:

.mixin {
  width: 1;
}
.class {
  width: 1;
}

PR에 대한 피드백에 감사드립니다. 이러한 솔루션은 우리가 소비할 것이 한 가지 또는 몇 가지 작은 것이라면 실행 가능합니다. 따라서 이러한 솔루션이 우리의 경우에 작동하지 않는 이유에 대해 자세히 설명하겠습니다.

우리는 클래스 계층으로 구현된 구성 요소의 큰 프레임워크를 만듭니다. 기본 테마의 자체 파일에 각 구성 요소에 대한 변수를 선언합니다. 그런 다음 여기에서 이 변수를 수정하려는 테마를 "파생"합니다. 사용자는 필요에 따라 테마를 조정할 수 있습니다.

또한 변수는 종종 다른 변수에서 "파생"됩니다. 가장 눈에 띄는 것은 베이스 컬러입니다. 우리는 테마 및 고유한 상속 동작과 결합된 공격적인 변수 값 전파를 사용하여 구성 요소의 대규모 클래스 계층 문제에 대한 대안을 논의하는 데 많은 시간을 할애했습니다.

지금까지 이러한 문제에 대한 가장 좋은 해결책은 변수를 "!default"(Sass 용어로)로 _항상_ 정의하는 것입니다. 이를 통해 사용자는 이 값이 추가 값을 계산하는 데 사용되기 전에 먼저 들어가서 값을 설정할 수 있습니다. 그러면 사용자가 타이밍을 관리하기가 매우 간단합니다. 이것은 모든 테마의 모든 변수에 대해 항상 해당되기 때문에 위에서 제안한 것과 같은 구문 문제는 상당한 부담과 오류가 발생하기 쉽습니다.

계속하면서 Less에 다른 기능을 제공하고 싶습니다. 나는 우리의 (비정상적으로?) 대규모 사용 사례가 언어/기능 세트를 확장하는 데 필요한 것이 무엇인지 확인하는 데 도움이 될 수 있다고 생각합니다.

나는 당신이 이것을 병합하는 것을 고려하거나 본질적으로 더 선언적인 몇 가지 대안을 제공하기를 바랍니다. 범위 트릭을 악용하는 것은 실제로 우리에게 효과가 없습니다.

귀하의 시간과 배려에 다시 한 번 감사드립니다!

스트레이트 클래스 대신 믹스인을 정의하는 것이 더 나을 것 같습니다. 그런 다음 기본 스타일시트 또는 다른 파생 테마에서 변수를 나중에 재정의할 수 있습니다. 이것이 내가 가져온 후 그리드의 거터 너비와 같은 것을 재정의할 수 있는 방법입니다.

명확히 하기 위해 여기서는 변수에 대해서만 이야기합니다. 그리고 우리는 기본 스타일시트가 없습니다. 테마당 클래스당 하나씩 있습니다. :)

귀하의 제안을 따르지 않을 수도 있지만 예를 들어 테마 변수 파일 중 하나는 다음과 같습니다.

$panel-base-color: $neutral-light-color !default;
$panel-header-color: $base-color !default;
$panel-frame-border-width: 1px !default;
$panel-header-font-size: round($font-size * 1.15) !default;
$panel-body-border-color: $neutral-dark-color !default;

$panel-light-header-color: #000 !default;
$panel-light-header-background-color: #fff !default;
$panel-light-tool-background-image: 'tools/tool-sprites-dark' !default;
$panel-light-body-border-color: $neutral-dark-color !default;
$panel-ignore-frame-padding: true !default;

이 파일은 4개의 기본 테마 체인이 있는 테마에 대한 다양한 패널 값을 설정합니다. 이러한 기본 테마에는 패널에 대한 고유한 변수 값이 있지만 먼저 로드되므로 재정의합니다. 사용자 테마가 이 테마에서 파생되고 고유한 값을 제공하지 않는 한.

이 패턴이 _많이_반복됩니다:)

좋습니다. 왜 메인 less 시트에서 @panel-base-color 를 재정의하지 않습니까? LESS 변수는 전역적이므로 마지막에 발생하는 변수가 승자입니다.

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

@panel-base-color: red;

이제 테마에 사용된 모든 항목이 재정의됩니다. 아무도 이것을 가져오기 체인에서 재정의하지 않으면 원래 설정되어 있던 것이 기본값이 됩니다.

우리는 "메인 리스 시트"가 없습니다. :) 여러분의 도움과 제안에 감사드립니다. 하지만 내부적으로 이 문제에 대해 많은 논의가 있었고 잠시 동안 진행되는 경향이 있습니다. 여기에서 제안한 대로 기본 변수 설정이 필요하다고 생각하는 것으로 충분합니다. 이 기능은 Sass에 있으며 복잡성을 줄이고 사용자에게 테마를 구성할 때 유연성을 제공하는 데 매우 유용하다는 것을 알았습니다.

이 모든 것이 이 풀 리퀘스트나 유사한 파생 상품이 받아들여질 것이라는 의미인지 궁금합니다. 불쾌한 경우 구문을 조정하게 되어 기쁩니다.

우리는 "메인리스 시트"가 없습니다 :)

위의 답변에서 "귀하의 기본 시트가 적은 시트"를 "사용자의 시트가 적은 시트 중 하나"로 바꾸기만 하면 됩니다. 지금까지 SASS !default (어떤 구문이든 간에)는 LESS에 존재하지 않는 문제를 해결하기 위해 발명된 것 같습니다.
@dongryphon , 물론 틀릴 ​​수 있지만 @SomMeri 와 @Soviut이 제안한 솔루션을 사용할 수 없는 이유를 아직 파악하지 못했습니다.

다른 말로 하자면, 가져오지 않고 대신 모든 변수가 같은 시트에 있다고 상상해 보십시오. 이것이 바로 수입이 하는 일입니다. 따라서 이러한 상황에서 동일한 이름을 가진 두 개의 변수 선언이 있는 경우 시트의 마지막 선언이 승리합니다.

@base-color: green;

div {
    background: @base-color;
}

@base-color: red;

기본 색상은 마지막에 다시 선언되기 때문에 div에 사용되는 기본 색상은 빨간색이 됩니다. 다음과 같이 컴파일됩니다.

div {
    background: red;
}

이것은 이전에 나왔고, 사실 나는 그것이 구현되었다고 생각하며 부트스트랩에서 그것을 원하는 사람들로부터 풀 요청을 받았고 몇 가지 토론 후에 동의했습니다.

사용자가 가져오기 전에 변수를 정의할 수 있는 유일한 방법입니다. 사용자가 이후에 재정의를 정의하면 기본값이 있는 것처럼 작동합니다. 이는 가져온 파일에서도 사용 후에 정의된 경우에도 CSS와 동일한 방식으로 마지막 정의를 취하기 때문입니다.

라이브러리 사용자가 가져오기 후에 변수를 재정의(또는 가져오기 후에 변수 파일 가져오기)하는 것과 더 적은 것에 구문을 추가한다고 말하는 것은 그리 큰 부담이 아닙니다. 이것이 less의 장점 중 하나라고 생각합니다. sass와 같은 양을 수행하지만 대부분의 경우 더 간단한 구문을 사용합니다.

이것은 JavaScript 프로그래머가 생각할 수 있는 것과 반대지만 그 이면에 있는 아이디어는 CSS에 더 가깝다는 것입니다.

소비자에게 주문을 고려하도록 요청하는 것이 가능하지 않거나 바람직하지 않은 이유에 대해 자세히 설명해 주시겠습니까? 우리는 강력한 사용 사례가 있는 기능을 수락하지만 언어와 복잡성 팽창을 피하기 위해 엄격해야 합니다.

#1109 #1104 #313 참조

그리고 명확히 하자면, 우리는 단호하게 "아니오"라고 말하는 것이 아닙니다. 이 기능이 이미 존재할 수 있음을 보여주려고 합니다.

덜 문서에 몇 가지 정보를 추가했습니다

이미 사용 가능한 것으로 종료("간단한 방법") 기능(http://lesscss.org/features/#variables-feature-default-variables).

_syntax_가 겹치는 동안 SASS는 위에서 아래로 "실행"하지만 LESS는 그렇지 않고 대신 CSS처럼 작동하기 때문에 이러한 혼란이 자주 발생한다고 생각합니다. LESS는 CSS+(추가 기능이 있는 CSS)와 같고 SASS는 "CSS 구문이 있는 PHP"와 같습니다. (필요한 경우) 그 구분을 할 수 있는 방법이 있는지 궁금합니다.

소비자에게 주문을 고려하도록 요청하는 것이 가능하지 않거나 바람직하지 않은 이유에 대해 자세히 설명해 주시겠습니까? 우리는 강력한 사용 사례가 있는 기능을 수락하지만 언어와 복잡성 팽창을 피하기 위해 엄격해야 합니다.

우리는 도서관 사용자(및 소비자)에게 도서관 코드를 스스로 편집하지 말라고 가르치기 때문입니다. !default 기능이 없다는 것은 이 두 가지 중 하나를 수행해야 함을 의미합니다. 둘 다 똑같이 나쁜 imo:

• 사용자는 선언된 변수를 편집하기 위해 라이브러리 스타일시트를 직접 편집해야 합니다(이는 일종의 금지된 작업이므로 라이브러리 업데이트를 더 어렵게 만듭니다).
• 라이브러리는 두 가지 스타일시트를 제공해야 합니다. 하나는 기본 변수용이고 다른 하나는 실제 규칙용입니다. 그런 다음 사용자는 첫 번째 변수를 @import 하고 자체 변수를 선언한 다음 두 번째 변수를 @import 해야 합니다. 특히 두 파일을 같은 버전으로 유지하는 것은 생각보다 복잡합니다.

sass 접근 방식은 라이브러리가 단일 파일만 제공하면 사용자가 사용자 정의할 수 있음을 의미합니다.

my-color: red;
<strong i="15">@import</strong> "./my-library.less";

대신에:

<strong i="19">@import</strong> "./my-library-variables.less";
my-color: red;
<strong i="20">@import</strong> "./my-library-rules.less";

이 문제를 재고해야 한다고 생각합니다.

@arcanis 사실 왜 그렇게 생각하는지 모르겠습니다.

라이브러리는 두 가지 스타일시트를 제공해야 합니다. 하나는 기본 변수용이고 다른 하나는 실제 규칙용입니다.
sass 접근 방식은 라이브러리가 단일 파일만 제공해야 함을 의미합니다.

Less에서는 완전히 동일한 라이브러리 디자인입니다.

<strong i="11">@import</strong> "./my-library.less";
@my-color: red;

나는 당신이 단순히 "Lazy-Loading"을 놓치고 있다고 생각합니다 (그리고 정확히 동일한 예가 문서 에서 no, thanks! ~ !default 라고 말하는 데 사용됨).

나는 당신이 단순히 "Lazy-Loading"을 놓치고 있다고 생각합니다.

@seven-phases-max WTF, 맞습니다. 젠장, 아마 내 전체 답장을 삭제해야 할 것입니다(방금 삭제했습니다). 부트스트랩을 가져올 수 있고 특정 var를 재정의할 수 있다고 말하면서 제대로 작동합니까?

나는 당신을 믿지 않았고 그것을 확인하기 위해 내 자신의 테스트를 수행했습니다. 내가 이걸 어떻게 놓쳤어?? 사용자 정의를 포함하여 Bootstrap에서 본 모든 기사에서 variables.less 파일을 복사하고 고유한 값을 설정하도록 권장했기 때문이라고 생각합니다. 물론 더 많은 변수가 라이브러리에 추가될 때 문제가 발생합니다. 그리고 임포트 직전에 셀렉터가 출력되고 있다는 인상을 받은 것 같아요. 변수가 항상 이런 식으로 "지연 로드"되었습니까?

이것은 Less에서 일반적으로 놓치는 가장 중요한 단일 기능이어야 합니다. 이 기능을 언급하는 Less or Less 라이브러리에 대한 블로그 게시물을 본 적이 없습니다. 여기 스레드에 있는 모든 것과 문서를 사용하더라도 실제 라이브러리에서 이것이 의미하는 바가 즉시 명확하지 않았습니다. 나는 모든 사람들이 단순히 나중에 설정하여 이전에 선언된 변수를 무시할 수 있다고 말하는 줄 알았는데 이전에 가져온 문서의 변수 평가에 영향을 줄 줄은 몰랐습니다.

내가 지금까지 이것을 얻지 못했다는 것이 믿기지 않습니다. 이것은 기본적으로 내가 적은 문서를 구성하는 방법에 대한 모든 것을 변경하며 출력을 보여주지 않는 문서에 약간의 언급이 있습니다.

Less에서 !default 기능에 대한 요청이 많은 이유는 이 기능을 직감하거나 문서의 간단한 예제(저를 포함하여)에서 이해하는 사람이 거의 없기 때문일 수 있습니다.

최소한 @seven-phases-max에서 다시 설명해주셔서 감사합니다!

이런. 글쎄, 당신 말이 맞아. 나도 문서를 잘못 이해했어, 내 나쁜!

@Soviut 당신은 빌어먹을 천재입니다! 변수 선언이 SASS/LESS에서 그렇게 작동하는지 전혀 몰랐습니다. 감사합니다!

나는 이것이 내가 Less에서 쓴 다른 모든 것들에서 명백한 행동이 아니었다는 사실에 여전히 이마를 치고 있습니다. 내 문제는 내가 그것을 수행하는 방법을 이해하지 못하는 사람들이 작성한 빈약한 예제 기사를 본 것입니다.

또한 참고: @spikesagal 귀하의 진술: "변수 선언이 SASS/LESS에서 그런 식으로 작동하는지 전혀 몰랐습니다." -- 내가 아는 한, 변수의 동작은 두 언어 간에 동일하지 않습니다. SASS와 LESS는 매우 다르게 평가합니다.

그리고 그들은 Sass로 이동하기 때문에 BS4에서 이 기능을 죽이고 있습니다... :-1: 그 이동에 대해 여전히 꽤 슬픕니다.

더 많은 !default 변수를 위한 싸움이 시작됩니다. [twbs/bootstrap#17418]

글쎄, 그들은 어떤 방식으로든 SCSS 소스를 변경하여 Less 기능을 죽일 수 없습니다. (기술적으로는 "기능"(일종의 "합성된 동작"과 같은)이 아니라 기본 속성/게으른 평가의 결과입니다). BS의 Less 버전이 있고(기여할 의사가 있는 사람들의 수의 문제일 뿐입니다), 최소한 하나의 전역 변수가 있는 한 - 항상 해당 변수를 재정의할 수 있습니다.

잘. bootstrap의 공식 v4-alpha가 Sass로 옮겨졌습니다. 적어도 내가 이해하기로는 공식 문서에서는 덜 죽고 있습니다. Sass에는 지연 로드 변수와 같은 것이 없기 때문에 이 기능에 대한 지원도 중단됩니다. 그들은 !default만 지원합니다. 이것은 어떤 의미에서는 "오, 우리는 당신이 외부에서 우리의 변수를 한 번만 재정의할 수 있도록 허용하고, 우리가 허용하는 경우에만 허용합니다. 따라서, 우리가 당신에게 단순히 !default를 생략함으로써 변수를 생성하면, 당신은 거의 엉망이 되어 파일에 있는 전체 darn 선택기를 재정의해야 합니다. 처리하십시오."

Sass에는 지연 로드 변수와 같은 것이 없기 때문에 이 기능에 대한 지원도 중단됩니다.

글쎄, 이것은 단지 "부트스트랩에서 죽인다"는 의미일 뿐입니다(이는 분명히 이 스레드 범위를 벗어난 것입니다. BS의 Less 버전이 없는 한 _this_ 저장소에 있는 부트스트랩 기능에 대해 신경쓰지 않아야 합니까?).

이 토론은 부트스트랩에서 변수를 재정의하는 것에 관한 것이었기 때문에...

우리는 더 적은 것을 고수하고 있습니다 :smile:

원래 언급된 딜레마에 대한 사용 사례가 있습니다. 다음과 같은 단순화된 예를 고려하십시오.

1. 다음과 같은 h1의 글꼴 크기를 정의하는 더 적은 파일이 있습니다.
   <strong i="8">@font_size__h1</strong> = 30px;
2. @font_size__h1 선언을 사용하는 별도의 LESS 파일이 포함된 플러그인이 있습니다. 그래서 저는 <strong i="12">@import</strong> (reference) "path/to/file.less"; 합니다. 문제 없습니다. 이제 사용할 수 있습니다.
3. 이제 @font_size__h1 가 어디에도 정의되지 않은 새 사이트로 "플러그인"을 가져옵니다. 이 시점에서 " @font_size__h1 가 정의되어 있으면 해당 값을 사용하고 정의되지 않은 경우 여기에 정의한 값을 사용하십시오."라고 말하는 것이 좋습니다.

내가 볼 수있는 한 항목 3은 현재 불가능합니다.

@theMikeD

내가 볼 수있는 한 항목 3은 현재 불가능합니다.

스레드를 읽지 않은 것 같습니다.

<strong i="10">@import</strong> "path/to/file.less";
<strong i="11">@import</strong> "here.less"; // if it's not defined <elsewhere>, then use the value I define <here>
<strong i="12">@import</strong> "elsewhere.less";

물론 다음과 같이 줄일 수 있습니다.

<strong i="16">@import</strong> "path/to/file.less"; // <- define default value there
@font-size-h1: foo;          // if it's not defined here then use the value defined above

이는 기본적으로 http://lesscss.org/features/#variables -feature-default-variables와 동일한 예입니다.

예, 스레드를 읽었습니다. 귀하의 예에 내 질문이 거꾸로 있기 때문에 내가 묻는 것을 이해하지 못하는 것 같습니다.

물론 다음과 같이 줄일 수 있습니다.
@import "경로/to/file.less"; // <- 거기에 기본값을 정의합니다.
@ font-size-h1: foo; // 여기에 정의되지 않은 경우 위에 정의된 값을 사용합니다.

이것은 내가 필요한 것과 반대입니다. 이것은 path/to/file.less 의 @font-size-h1 값을 무엇이든 상관없이 로컬 값으로 덮어씁니다. 내가 필요한 것은 다음과 같은 경우에만 사용되는 로컬 파일의 값입니다.
a) path/to/file.less 가 로드되지 않았거나
b) '@ font_size__h1 is not set in path/to/file.less`의 값

IOW @font-size-h1: foo; 의 로컬 값은 항상 로컬 파일에 있지만 path/to/file.less 에 설정된 경우 재정의해야 합니다.

어쨌든 어제 밤에 해결 방법을 찾았습니다. 먼저 로컬 값을 할당한 다음 @import 문을 파일의 시작 부분이 아닌 끝 부분에 두는 것입니다. 발견되면 로컬 값을 덮어씁니다.

어쨌든 감사합니다.

당신은 내가 묻는 것을 이해하지 못하는 것 같습니다

보기를 새로 고치려면 덜 변수 기본 사항부터 시작하는 것이 좋습니다.

• 게으른 평가
• 변수 의미론
• 세상에서 가장 오해받는 ...

(왜냐하면 당신은 명령형 C/PHP와 같은 방식으로 모든 것을 생각하려고 하는 것처럼 보이지만 Less/CSS에서는 완전히 "선언적 거꾸로"입니다.)
지난 몇 년 동안 죽을 때까지 이야기되어 왔으며 !default 는 기본 Less 변수 재정의와 비교할 때 _아무것도_ 새로운 것을 추가할 수 있습니다. 기간. (우리는 이전에 여러 번 가본 적이 있습니다. 누군가가 Less에서 !default 에 대한 사용 사례를 찾았다고 생각한다면 그것은 Less 가변 의미론에 대한 그의 오해 외에는 아무 의미가 없습니다.)

내가 필요한 것은 다음과 같은 경우에만 사용되는 로컬 파일의 값입니다.
a) path/to/file.less 가 로드되지 않았거나
b) @ font_size__h1 path/to/file.less 에 설정되어 있지 않습니다.

그러면 단순히 반대입니다.

@font-size-h1: foo;
<strong i="27">@import</strong> "path/to/file.less"; 

타다!

...내가 말했듯이 내가 착륙 한 곳입니다.

내가 쓴 기사를 제안하려고 했는데 @seven-phase-max가 링크된 기사를 보았습니다. 😄 우리를 믿으세요. 당신이 요구하는 것은 이미 존재합니다! 그러나 어떻게/왜 존재하는지 이해하려면 Less의 변수 평가를 이해해야 합니다.

데이터 그리드인 구성 요소가 있습니다. 이 구성 요소에는 구성 요소 패키지에 의해 정의된 기본 스타일이 있어야 합니다. 그러나 외부에서 특정 변수가 이미 정의되어 있는 경우 우선 순위가 있어야 합니다.

앱리스
/grid/grid.less

그리드는 구성 요소이므로 여기에 추가하거나 grid.less 파일 뒤에 코드를 추가하는 것을 잊어버리십시오.
이 문제를 얼마나 적게 다루는지 모르겠습니다. Scss가 이 기능을 제공하는 데는 그럴만한 이유가 있습니다.

@geri777

그러나 외부에서 특정 변수가 이미 정의되어 있는 경우 우선 순위가 있어야 합니다.

Less는 CSS처럼 평가됩니다.

.css {  
  --color: blue;
  color: var(--color);  // --color will be red
  --color: red;
  border-color: var(--color);  // --color will still be red, red is the scope's final value
}

.less {  
  <strong i="10">@color</strong>: blue;
  color: @color;  // <strong i="11">@color</strong> will be red
  <strong i="12">@color</strong>: red;
  border-color: @color;  // <strong i="13">@color</strong> will still be red, red is the scope's final value
}
````

Scss, instead, doesn't mimic CSS evaluation and instead evaluates more like, say, PHP.

```scss
.scss {  
  $color: blue;
  color: $color;  // $color will be blue
  $color: red;
  border-color: $color;  // $color will be red
}

따라서 Sass/SCSS에서 루트 변수의 값을 재정의하려면 두 가지 작업을 수행해야 합니다.

1. 모든 변수 선언에 !default 태그를 지정해야 합니다.
2. 이러한 기본 선언 앞에 전역 변수를 삽입해야 합니다.

에서와 같이:

// main.scss
<strong i="22">@import</strong> "overrides.scss";
<strong i="23">@import</strong> "library.scss";

// overrides.scss
$color: red;

// library.scss
$color: blue !default;

.scss {
  color: $color;
}

Less에서는 테마 지정이 훨씬 쉽습니다. (일반적으로) 라이브러리에 대해 아무 것도 변경할 필요가 없으며 재정의를 뒤에 두기만 하면 됩니다. 한 가지만 하면 됩니다.

// main.less
<strong i="27">@import</strong> "library.less";
<strong i="28">@import</strong> "overrides.less";

// overrides.less
<strong i="29">@color</strong>: red;

// library.less
<strong i="30">@color</strong>: blue;

.less {
  color: @color;
}

따라서 Less는 항상 최종 값을 수락하므로 !default 가 필요하지 않습니다.

CSS의 캐스케이드와 같은 Less 평가를 생각하십시오. 그냥 작동합니다. 최종 선언이 이깁니다.