Vscode: [scss] ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ํˆดํŒ์˜ ์ž˜๋ชป๋œ ์„ ํƒ๊ธฐ ํŠน์ด์„ฑ

์— ๋งŒ๋“  2019๋…„ 04์›” 19์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: microsoft/vscode


  • VSCode ๋ฒ„์ „ : 1.33.1
  • OS ๋ฒ„์ „ : Windows 10

์žฌํ˜„ ๋‹จ๊ณ„ :

  1. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์‹ญ์‹œ์˜ค.
    image
  2. &__b ์œ„๋กœ ๋งˆ์šฐ์Šค๋ฅผ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

image

์„ ํƒ๊ธฐ ํŠน์ด์„ฑ์€ ์˜ฌ๋ฐ”๋ฅธ (0, 1, 0) ๋Œ€์‹  (0, 0, 0)์œผ๋กœ ํ‘œ์‹œ๋˜๋ฉฐ ํด๋ž˜์Šค ์„ ํƒ๊ธฐ์ž…๋‹ˆ๋‹ค.


๋ชจ๋“  ํ™•์žฅ์ด ๋น„ํ™œ์„ฑํ™” ๋œ ๊ฒฝ์šฐ์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๊นŒ? : ์˜ˆ / ์•„๋‹ˆ์š”
์˜ˆ.

bug css-less-scss

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

์—ฌ์ „ํžˆ ๋ฌธ์ œ๊ฐ€ ๋ณด์ž…๋‹ˆ๋‹ค. ์„ ํƒ๊ธฐ ํŠน์ด์„ฑ์€ (0, 0, 0)์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

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

๋ฐ”๋‹๋ผ CSS ( Ctrl + K , M , "css")์—์„œ๋„์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

image

... ํˆดํŒ์— ์ œ๊ณต๋œ " Selector Specificity "๋งํฌ์— ๋”ฐ๋ผ (0, 0, 3) ์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.


:before ์•ž์— ๋‹จ์ผ ์ฝœ๋ก ์ด ์–ด๋–ป๊ฒŒ ์ถ”๊ฐ€๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. ::before ์™€ ๊ฐ™์ด ๋Œ€์‹  ์ด์ค‘ ์ฝœ๋ก ์„ ์ ‘๋‘์‚ฌ๋กœ ๋ถ™์ด๋ฉด ์˜ฌ๋ฐ”๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ์–ป์Šต๋‹ˆ๋‹ค.

image

@aeschli @octref ๋ˆ„๊ตฐ๊ฐ€ ์ด๊ฒƒ์„ ํ™•์ธํ•˜๊ณ  ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜๋ฉด ๋ฌธ์ œ๋ฅผ ๋‹ซ์•„๋„ ๋ ๊นŒ์š” ? ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์—ฌ์ „ํžˆ ๋ฌธ์ œ๊ฐ€ ๋ณด์ž…๋‹ˆ๋‹ค. ์„ ํƒ๊ธฐ ํŠน์ด์„ฑ์€ (0, 0, 0)์œผ๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

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