Js-beautify: Sass에 대한 newline_between_rules 지원(향상)

그리고 어떤 모습을 원하시나요?

CSS 버전과 유사 https://github.com/beautify-web/js-beautify/pull/574
일반적으로 하나의 중첩 수준이면 충분합니다.
예를 들면 다음과 같습니다.

// Icons
.icons {
  padding: 0;

  li {
    display: inline-block;
  }

  a {
    display: block;
    color: #000;
  }

  a:hover {
    color: #ccc;
  }
}

// Button
.button {
  &.primary {
    color: #4183c4;
  }

  &.primary:hover {
    color: lighten(#4183c4, 15%);
  }
}

안녕,
이것은 scs 규칙에 대한 작업입니까?

.old_price {
@include GibsonRegular();
@include 글꼴 크기(14);
색상: #646464;
여백-왼쪽: 10px;
텍스트 장식: 라인 스루;

.promovalue {
  <strong i="15">@include</strong> GibsonRegular();
}

}

+1

+1

+1

+1

newline_between_nested_rules: true 와 같은 옵션은 특히 중첩 문제인 것 같습니까?

} 및 ; 는 중첩된 새 줄에 대한 규칙을 고려해야 합니다.

+1, 또한 더 적은 비용으로

+1

+1

이것이 실제로 중첩된 규칙에만 문제가 있음을 확인할 수 있습니다. 현재 newline_between_rules: true :

body {
  background-color: #FFF;

  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

다음과 같이 됩니다.

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

newline_between_rules: false 결과는 다음과 같습니다.

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}
.container {
  color: blue;
}

따라서 중첩 규칙 사이의 개행 지원을 고려해야 합니다.

+1

이것에 대한 어떤 ETA?

+1

+1

+1 :(

+1

다른 +1

소음 죄송합니다. 나는 이것을 찬성하는 다른 방법이 있는지 몰랐습니다.

@zimmerboy 모든 댓글의 오른쪽 상단에는 +1 반응(:+1:)이 포함된 "반응 추가" 버튼이 있습니다.

beautify-css.js 내 해결 방법:

1. newLine 함수 교체:

        print.newLine = function(keepWhitespace, keepNewLine) {
            if (output.length) {
                if (!keepWhitespace && output[output.length - 1] !== '\n') {
                    print.trim();
                    if (keepNewLine) { output.push('\n'); }
                }

                output.push('\n');

                if (basebaseIndentString) {
                    output.push(basebaseIndentString);
                }
            }
        };

1. newline_between_rules 조건과 명령문을 모두 다음으로 변경합니다.

                    if (newline_between_rules) {
                        print.newLine(false, true);
                    }

참고: 이것은 속성 뒤의 규칙이 아니라 규칙 사이의 개행만 처리합니다. 누구든지 그것에 대한 아이디어가 있습니까?

@sickboy - 쿨, 풀 리퀘스트를 시작하고, 몇 가지 테스트를 추가하세요. 이 작업을 진행해 주시기 바랍니다.

이거 언젠간 나오나요? sass에 beautify를 사용하는 유일한 차단기입니다.

@mrahhal - 이 문제는 거의 2년이 되었습니다. @sickboy 가 이에 대해 일부 작업을 수행했습니다. 누군가는 테스트로 풀 리퀘스트를 하기만 하면 됩니다.

어쩌면 당신은 이것을하고 싶습니까? CONTRIBUTING.md를 참조하십시오.

@bitwiseman 불행히도 나는 이런 종류의 프로젝트나 시간에 대한 경험이 없습니다. 그러나 내 질문은 모든 사람들이 일반 CSS를 사용하거나 현재 형식이 작동하는 방식을 고수하고 있다는 것입니다. 그것은 아주 오래되었지만 해결하기 쉬운 문제에 대해 이상합니다.

@sickboy 이거 하고 있니? 아마 아무도 이것에 대해 활동하지 않는다면 결국 내가 그것을 다룰 것입니다. "max_preserve_newlines"의 몇 가지 이상한 동작을 제외하고, 이것은 내가 미화 사용을 완전히 방해하는 유일한 누락된 것입니다.

pull request #1117( css에 대해 reserved_newlines 추가 )이 이에 도움이 될지 궁금합니다.

@zimmerboy 네, 현재 문제에 대한 수정 사항인 것 같지만 제 생각에는 다른 종류입니다.

#1117이 병합되나요? 이 문제도 해결하는 것 같습니다.

@jorgeramirez - 이전 피드백에 대한 수정 사항을 기다리고 있습니다.

@bitwiseman 대단합니다!

업데이트가 있습니까?

@royduin - 최신 릴리스로 테스트하십시오.

잘 작동하는 것 같지만 댓글에 약간의 문제가 있습니다. Bootstrap SCSS가 좋은 예는 아니지만 여전히 그렇습니다.

리포지토리에서 코드 형식이 다음과 같습니다.

그리고 이것은 미화 후입니다.

예상대로 작동하지만 주석이 이전 선언과 겹치지만 주석 형식이 올바르게 지정되면 제대로 작동합니다.

다시 말하지만 실제로 중요한 것은 아니지만 Bootstrap은 널리 사용됩니다.

@stgogm
새 문제를 제출하십시오.
또한 이미지가 아닌 텍스트를 포함하십시오.

@bitwiseman 네, 죄송합니다. SCSS 린터 규칙을 존중한다면 실제로 문제가 되지 않는다는 점을 언급하고 싶었습니다.

@stgogm - 멋진 정보 감사합니다. 😄

@stgogm 을 설정하는 동안 중첩된 newline_between_rules 문제를 테스트할 수 있습니까? 와 함께

newline_between_rules: true

당신의

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    &+fieldset {
        margin-top: $padding-large;
    }
}

~이되다

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;

    &+fieldset {
        margin-top: $padding-large;
    }
}

?

실제로 차이가 없습니다.

작성된 코드(사이에 새 줄 없음):

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  & + fieldset {
    margin-top: $padding-large;
  }
}

"newline_between_rules": false 꾸미기 후:

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

"newline_between_rules": true 꾸미기 후 :

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

+ 사이의 공백을 제거했습니다.

js-beautify --version
1.6.12

@stgogm 감사합니다! 아니 @bitwiseman #1146이 이 문제를 수정하지 않았습니다.

"newline_between_rules"가 SCSS에 충분하지 않은 또 다른 예:

$variable: #333;
div {
  display: none;
}

이 SCSS를 포맷하면 변수와 div 선택기 사이에 새 줄이 추가되지 않습니다.

이 기능을 언제 사용할 수 있는지 명확합니까?

어떤 진전이 있습니까?

@dhghani-mehdi @whxaxes
이 기능은 할당되지 않았습니다. 이를 구현하고 테스트를 추가할 사람이 필요합니다.

+1

+1

+1

+1

+1

구독자에게 스팸을 전송하지 않는 +1 메시지가 아닌 초기 게시물에 👍 반응으로 투표하세요. 감사 해요!