Js-beautify: SCSS 맡 문제

에 λ§Œλ“  2017λ…„ 08μ›” 25일  Β·  12μ½”λ©˜νŠΈ  Β·  좜처: beautify-web/js-beautify

μž…λ ₯

μ½”λ“œλŠ” λ―Έν™” 전에 λ‹€μŒκ³Ό 같이 λ³΄μ˜€μŠ΅λ‹ˆλ‹€.

$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
) !default;

μ˜ˆμƒ 좜λ ₯

μœ„μ˜ μ½”λ“œλŠ” μ˜¬λ°”λ₯΄κ²Œ λ“€μ—¬ μ“°κΈ°λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ λ™μΌν•˜κ²Œ μœ μ§€λ˜μ–΄μ•Όν•©λ‹ˆλ‹€.

μ‹€μ œ 좜λ ₯

μ½”λ“œλŠ” μ‹€μ œλ‘œ λ―Έν™” ν›„ λ‹€μŒκ³Ό 같이 λ³΄μž…λ‹ˆλ‹€.

$theme-colors: ( primary: $blue,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800) !default;

ν™˜κ²½

운영체제 : Windows

μ„€μ •

{
  "end_with_newline": true,
  "max_preserve_newlines": 2,
  "preserve_newlines": true,
  "js": {
    "indent_with_tabs": true,
    "indent_size": 4
  },
  "css": {
    "indent_size": 2,
    "newline_between_rules": true,
    "selector_separator_newline": true,
    "space_around_combinator": true
  },
  "html": {
    "indent_size": 2,
    "unformatted": [],
    "wrap_attributes": "force-aligned"
  }
}
css templating bug

λͺ¨λ“  12 λŒ“κΈ€

νŠΈμœ— λ‹΄μ•„ κ°€κΈ°
λ‚˜λŠ” 같은 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

$mdc-typography-styles-body1: (
  font-size: 1.125rem,
  color: $g,
  // ggrey
);

λœλ‹€

$mdc-typography-styles-body1: (font-size: 1.125rem,
color: $g,
// ggrey
);

λ‚˜λŠ” 이것에 λŒ€ν•΄ μ•½κ°„ μ‹€λ§ν•©λ‹ˆλ‹€. 이것에 λŒ€ν•΄ λ­”κ°€ μΆ”κ°€ν•˜κΈ°λ₯Ό λ°”λžλ‹ˆλ‹€.

λ‚˜λŠ” 같은 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. preserve λͺ…령을 μ‚¬μš©ν•˜λ €κ³ ν–ˆμ§€λ§Œ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

/* beautify preserve:start */
$inuit-config: (
  env: dev,
  healthcheck: false,
  debug: true,
);
/* beautify preserve:end */

이것은 https://beautifier.io/μ—μ„œ μž¬ν˜„ ν•  수

cssκ°€ preserve λͺ…령에 λ‹€λ₯Έ ν‘œκΈ°λ²•μ„ μ‚¬μš©ν•˜λŠ”μ§€ 여뢀에 관계없이 힌트λ₯Ό 찾지 λͺ»ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ κΆκΈˆν•©λ‹ˆλ‹€. λ‚΄κ°€ λ­”κ°€ 잘λͺ»ν•˜κ³ μžˆλŠ” κ±΄κ°€μš”?

λΏ‘λΏ‘
당신은 잘λͺ»ν•œ 것이 μ—†μŠ΅λ‹ˆλ‹€.
λΆˆν–‰νžˆλ„ preserve 은 아직 CSS에 λŒ€ν•΄ κ΅¬ν˜„λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 방금 ignore λ₯Ό μ§€μ›ν•˜λŠ” 1.8.10-beta4λ₯Ό μΆœμ‹œν–ˆμŠ΅λ‹ˆλ‹€. μ‹œλ„ν•΄μ£Όμ„Έμš”.

2019 년에 이에 λŒ€ν•œ 해결책이 μžˆμŠ΅λ‹ˆκΉŒ?

λΏ‘ 빡뀨
μ‚¬λžŒλ“€μ΄ μ†”λ£¨μ…˜μ„ κ΅¬ν˜„ν•˜λŠ” 데 κ΄€μ‹¬μ΄μžˆλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. μ–΄λ–€ 도움을 μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

아직 아무것도 μ—†λ‚˜μš”? λͺ‡ 년이 지났지 만 μ—¬μ „νžˆ 같은 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. λ‚˜λŠ”μ΄ ν”„λ‘œμ νŠΈκ°€ scss ν˜•μ‹ν™”λ₯Ό 쒋은 λ°©μ‹μœΌλ‘œ 지원할 μ˜λ„κ°€ μ—†μœΌλ©° 이에 λŒ€ν•œ λŒ€μ•ˆμ„ μ°Ύμ•„μ•Όν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

@mrahhal μ‹œλ„ ν–ˆμŠ΅λ‹ˆκΉŒ

/* beautify ignore:start */
$inuit-config: (
  env: dev,
  healthcheck: false,
  debug: true,
);
/* beautify ignore:end */

μˆ˜λ™ μ„œμ‹μ„ μ˜λ―Έν•˜λ”λΌλ„ μ œλŒ€λ‘œ μž‘λ™ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

λΏ‘ 빡뀨
였늘만 λ‹Ήμ‹ μ—κ²Œ λŒ€λ‹΅ν•˜μ§€ λͺ»ν•œ 것을 κΉ¨λ‹«μŠ΅λ‹ˆλ‹€. 정말 μ£„μ†‘ν•©λ‹ˆλ‹€!
예, μ†”λ£¨μ…˜μ΄ 잘 μž‘λ™ν•©λ‹ˆλ‹€! κ°μ‚¬ν•©λ‹ˆλ‹€!

이것은 νš¨κ³Όκ°€ μžˆμ—ˆλ‹€! λ‚˜λŠ” beautifyκ°€ λ‹¨μˆœνžˆ scssλ₯Ό μ΄ν•΄ν•˜κΈ°λ₯Ό λ°”λžμ§€λ§Œ, 그렇지 μ•Šλ‹€λŠ” 것이 κ³΅ν‰ν•˜λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. readmeμ—μ„œ CSS 만 μ–ΈκΈ‰λœλ‹€λŠ” 것을 κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€. μ–΄μ¨Œλ“  이것은 ν˜„μž¬λ‘œμ„œλŠ” 쒋은 ν•΄κ²° 방법이 될 κ²ƒμž…λ‹ˆλ‹€. @rowild κ°μ‚¬ν•©λ‹ˆλ‹€!

@mrahhal 감사 ν•©λ‹ˆλ‹€! @bitwiseman에 λŒ€ν•œ λͺ¨λ“  cudos,ν•˜μ§€λ§Œ! :-) κ±΄λ°°ν•˜κ³  μ•ˆμ „ν•˜κ²Œ μ§€λ‚΄μ„Έμš”!

이 문제λ₯Ό 계속 μ—΄μ–΄ 두어야할지 λͺ¨λ₯΄κ² μ§€λ§Œ 이미 λ„ˆλ¬΄ μ˜€λž˜λ˜μ—ˆμœΌλ―€λ‘œ μ§€κΈˆμ€μ΄ 문제λ₯Ό μ’…λ£Œν•˜κ² μŠ΅λ‹ˆλ‹€. 일반적으둜 SCSS λ¬Έμ œκ°€ λ‹€λ₯Έ κ³³μ—μ„œ μΆ”μ λ˜κ³  μžˆλŠ”μ§€ λ˜λŠ” μ‹€μ œλ‘œ SCSSλ₯Ό μ œλŒ€λ‘œ 지원할 κ³„νšμ΄ μ—†λŠ”μ§€ ν™•μ‹€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

SCSS에 λŒ€ν•œ 일뢀 지원이 있으며 천천히 μž‘μ—… μ€‘μž…λ‹ˆλ‹€.

이 ν”„λ‘œμ νŠΈλŠ” λ§Žμ€ μ‚¬λžŒλ“€μ΄ μ‚¬μš©ν•˜μ§€λ§Œ 기본적으둜 ν˜„μž¬ ν•œ λͺ…μ˜ κΈ°μ—¬μžκ°€ μžˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ 일이 μΌμ–΄λ‚˜λŠ” μ†λ„λŠ” μ‹œκ°„μ΄μžˆμ„ λ•Œμž…λ‹ˆλ‹€. λˆ„κ΅°κ°€κ°€ ν•¨κ»˜ν•˜κΈ°λ‘œ μ„ νƒν•˜κ³  κΈ°μ—¬ν•œλ‹€λ©΄ 이것은 μ—¬μ „νžˆ β€‹β€‹κ΅¬ν˜„ν•˜κΈ°μ— 쒋은 κ²ƒμž…λ‹ˆλ‹€. μ•„λ‹ˆλ©΄ λ‚΄κ°€ ν•  μˆ˜μžˆμ„ λ•Œ 얻을 것이닀.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰