๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/vscode

vscode php scss ์‚ฌ์šฉํ•˜๊ธฐ sass ์ปดํŒŒ์ผ๋Ÿฌ ์„ค์น˜

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2020. 1. 3.

๋ชฉ์ฐจ

    โœˆ vscode php scss ์‚ฌ์šฉํ•˜๊ธฐ sass ์ปดํŒŒ์ผ๋Ÿฌ ์„ค์น˜.

    ์ฒ˜์Œ vscode๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ๋Š” ์•ต๊ทค๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, scss๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค.

    ์–ผ๋งˆ ์ „์— php ํ”„๋กœ์ ํŠธ์— scss๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  vscode scss์„ค์น˜๋ฅผ ํ–ˆ๋‹ค.

    ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ € ์ž์ฒด๊ฐ€ scss๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— scss๋Š” sass compiler๋กœ ์ปดํŒŒ์ผํ•ด์„œ cssํŒŒ์ผ์„ ์ƒ์„ฑํ•ด ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

    ์–ด๋””๊นŒ์ง€๋‚˜ scss๋Š” ํผ๋ธ”๋ฆฌ์…”์˜ ํŽธ์˜๋ฅผ ์œ„ํ•œ ๊ธฐ๋Šฅ์ด์ง€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์œ„ํ•œ ๊ธฐ๋Šฅ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

    vs์ฝ”๋“œ์—์„œ scss๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์€ ์‚ฌ์šฉ ์–ธ์–ด์™€ ๋ฌด๊ด€ํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.

    ๋ฐ”๋กœ Live sass compiler๋ฅผ ์„ค์น˜ํ•จ์œผ๋กœ์จ ๊ฐ€๋Šฅํ•˜๋‹ค.

    sass Lint ์ต์Šคํ…์…˜ ์„ค์น˜

    ์„ค์น˜ํ•˜๋Š” ๊น€์— sass Lint ์ต์Šคํ…์…˜๋„ ์„ค์น˜ํ•˜๋ฉด ํŽธ๋ฆฌํ•˜๋‹ค.

    vscode sass ์„ค์น˜

    sass๋„ ๋‹น์—ฐํžˆ ์„ค์น˜.

    ์ปดํŒŒ์ผ ๊ณผ์ •์—์„œ ๋‹น์—ฐํ•˜๊ฒŒ๋„. mapํŒŒ์ผ์ด ์ƒ์„ฑ๋œ๋‹ค.

    ์ด ๋งตํŒŒ์ผ์€ ๋”ฑํžˆ ๊ธฐ๋Šฅ์ ์œผ๋กœ ํ•˜๋Š” ์—ญํ• ์€ ์—†๋‹ค.

    ๋ฏธ๋ž˜์—๋Š” ์žˆ์„์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ๋Œ€์ฒด๋กœ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋””๋ฒ„๊น…ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํŒŒ์ผ์ด๋‹ค.

    ์ด ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด https://nm817.tistory.com/37 ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์—์„œ ํ™•์ธํ•˜๊ธฐ ๋ฐ”๋ž€๋‹ค. 

    ์ปดํŒŒ์ผ์ด ์„ฑ๊ณตํ•˜๋ฉด

    ์ž‘์—…ํ‘œ์‹œ์ค„์— Success๊ฐ€ ๋œฌ๋‹ค.

    ์‹คํŒจํ•˜๋ฉด ๋นจ๊ฐ„์ƒ‰ Error์™€ ํ•จ๊ป˜ ์—๋Ÿฌ ์œ„์น˜๊ฐ€ Output์— ํ‘œ์‹œ๋œ๋‹ค.

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€