Js-beautify: CSS: ์ค„๋ฐ”๊ฟˆ ์œ ์ง€

์— ๋งŒ๋“  2014๋…„ 09์›” 25์ผ  ยท  17์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: beautify-web/js-beautify

์•„๋งˆ๋„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ตฌ์„ฑํ•˜์ง€ ์•Š์•˜๊ฑฐ๋‚˜ ๋ˆ„๋ฝ๋˜์—ˆ์„ ์ˆ˜ ์žˆ์ง€๋งŒ CSS์—์„œ ์ค„ ๋ฐ”๊ฟˆ์„ ์œ ์ง€ํ•ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์œผ๋ฉฐ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚ด ๊ตฌ์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

"css": {
  "allowed_file_extensions": ["css", "scss", "sass", "less"],
  "end_with_newline": true,
  "indent_char": " ",
  "indent_size": 2,
  "selector_separator": " ",
  "selector_separator_newline": false,
  "preserve_newlines": true
}
css enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

SCSS ํŒŒ์ผ์˜ ๊ฒฝ์šฐ +1ยฒ.

๋ฌธ์ œ #563์—๋„ ๋น„์Šทํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. .scss ํŒŒ์ผ์„ ์ €์žฅ/ํฌ๋งทํ•˜๋ฉด ๋งจ ์œ„์— ์žˆ๋Š” ๋ณ€์ˆ˜์™€ ๊ฐ€์ ธ์˜ค๊ธฐ ํ˜ธ์ถœ์ด ๋ชจ๋‘ ํ•ฉ์ณ์ ธ ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋นˆ ์ค„์„ ๊ฐ์ง€ํ•˜๊ณ  ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค :+1:

์ฐธ๊ณ ๋กœ:

<strong i="8">@import</strong> "config";

$background: #ececec;
$color: #00aec8;

body {
    font-size: $font-size;
}

... ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

<strong i="12">@import</strong> "config";
$background: #ececec;
$color: #00aec8;
body {
    font-size: $font-size;
}

๋ชจ๋“  17 ๋Œ“๊ธ€

์•„๋‹ˆ์š”, css-beautifier์—๋Š” ์•„์ง reserved_newlines ์˜ต์…˜์ด ์—†์Šต๋‹ˆ๋‹ค.

+1

+1
์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค

SCSS ํŒŒ์ผ์˜ ๊ฒฝ์šฐ +1ยฒ.

๋ฌธ์ œ #563์—๋„ ๋น„์Šทํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. .scss ํŒŒ์ผ์„ ์ €์žฅ/ํฌ๋งทํ•˜๋ฉด ๋งจ ์œ„์— ์žˆ๋Š” ๋ณ€์ˆ˜์™€ ๊ฐ€์ ธ์˜ค๊ธฐ ํ˜ธ์ถœ์ด ๋ชจ๋‘ ํ•ฉ์ณ์ ธ ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋นˆ ์ค„์„ ๊ฐ์ง€ํ•˜๊ณ  ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค :+1:

์ฐธ๊ณ ๋กœ:

<strong i="8">@import</strong> "config";

$background: #ececec;
$color: #00aec8;

body {
    font-size: $font-size;
}

... ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

<strong i="12">@import</strong> "config";
$background: #ececec;
$color: #00aec8;
body {
    font-size: $font-size;
}

+1

+1 !!

HTML/CSS/JS Prettify ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ๋ถ„๋ช…ํžˆ ์ด๊ฒƒ์— ์˜์กดํ•˜๊ธฐ ๋•Œ๋ฌธ์—? CSS์™€ SCSS๋ฅผ ์ •๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๊ทธ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ผ์ข…์˜ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜ค๋žซ๋™์•ˆ ์“ธ๋ชจ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์†์œผ๋กœ ์ถฉ๋ถ„ํžˆ ํฐ ํŒŒ์ผ์„ ์ •๋ฆฌํ•˜๊ณ  ๊ณต๊ฐ„์„ ๋‚จ๊ฒจ๋‘๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ด ํ”„๋กœ์„ธ์Šค์— ์˜ํ•ด ํ•จ๊ป˜ ์œผ๊นฌ ๋ฐฑ์—…์€ ์ขŒ์ ˆ์ž…๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

:+1:

+1

+1

+1

+1

+1

+1

ํ™œ์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ฐ™์€ ๋Œ€์•ˆ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

"ํ™œ์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ"?

+1

@reza3vi ๋‹น์‹ ์€ ๋ฌด์—‡์„ +1ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์ด๊ฒƒ์€ ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰