Less.js: `background` ์†๊ธฐ ์†์„ฑ ๋‚ด์—์„œ CSS3 background-size๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ตฌ๋ฌธ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2013๋…„ 01์›” 10์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: less/less.js

CSS3์˜ ์ƒˆ๋กœ์šด background-size ์†์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด background-position ์‚ฌ์–‘๊ณผ background ์†๊ธฐ ์„ ์–ธ์— ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

div {
    background: url('/path/to/image.png') left center / contain no-repeat;
}

๊ทธ ๊ฒฐ๊ณผ ๊ตฌ๋ฌธ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ๋ฌธ ๋ถ„์„๊ธฐ๊ฐ€ / contain ๋ถ€๋ถ„์—์„œ ๋ถ„๋ช…ํžˆ ์งˆ์‹ํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ฑฐํ•˜๋ฉด ์˜ค๋ฅ˜๋„ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

๋ฌผ๋ก  ~"โ€ฆ" background ์†์„ฑ์˜ ์ „์ฒด ๊ฐ’์„ ์ด์Šค์ผ€์ดํ”„ํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์ œํ•œ์—†์ด ๊ธฐ๋ณธ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

bug medium priority

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

@ gpv-dev

--strict-math=on ์˜ต์…˜์—†์ด ์ปดํŒŒ์ผํ•˜๋ฉด ๊ฒฐ๊ณผ๊ฐ€ ์˜ˆ์ƒ๋ฉ๋‹ˆ๋‹ค. ์œผ๋กœ ์ง€๊ธˆ (์˜ˆ : ํ•˜๋‚˜ ๋˜๋Š” ๋‘ ๊ฐœ์˜ ์˜ˆ์™ธ์™€ ๊ฐ™์€ ๋ฌธ์— ๋Œ€ํ•ด font ๋‹น์‹ ์ด ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ์†์„ฑ) --strict-math=on ๋˜๋Š” ์ผ๋ถ€ ํƒˆ์ถœ ๋„ฃ์–ด / , ์˜ˆ : ~"0/100%" .

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

PR # 915์˜ ํ•˜์œ„ ์‚ฌ๋ก€์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ํ•œ๋™์•ˆ ์†Œ์‹์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค ...

๋„ค, ์ •ํ™•ํžˆ ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— 1.4.0์—์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. @dmcass ๊ฐ€ ๋๋‚ด์ง€ ์•Š์œผ๋ฉด # 915๋ฅผ

๋งˆ์Šคํ„ฐ์— ๊ณ ์ •

lessc 2.1.1์—์„œ์ด ๋ฌธ์ œ๊ฐ€์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

/* less */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0/100%;
    position: fixed;
}
/* compiled css */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0;
    position: fixed;
}

lessc 2.1.1์„ ์‚ฌ์šฉํ•˜์—ฌ Linux Mint 17 Qiana์—์„œ ์‹คํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค.

@ gpv-dev

--strict-math=on ์˜ต์…˜์—†์ด ์ปดํŒŒ์ผํ•˜๋ฉด ๊ฒฐ๊ณผ๊ฐ€ ์˜ˆ์ƒ๋ฉ๋‹ˆ๋‹ค. ์œผ๋กœ ์ง€๊ธˆ (์˜ˆ : ํ•˜๋‚˜ ๋˜๋Š” ๋‘ ๊ฐœ์˜ ์˜ˆ์™ธ์™€ ๊ฐ™์€ ๋ฌธ์— ๋Œ€ํ•ด font ๋‹น์‹ ์ด ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ์†์„ฑ) --strict-math=on ๋˜๋Š” ์ผ๋ถ€ ํƒˆ์ถœ ๋„ฃ์–ด / , ์˜ˆ : ~"0/100%" .

@ seven-phases-max

๋น ๋ฅธ ์‘๋‹ต ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‹น์‹ ์˜ ์ œ์•ˆ์€ ์ •ํ™•ํžˆ ๋‚ด๊ฐ€ ํ•„์š”ํ–ˆ๋˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@ seven-phases-max์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;

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